Maintain (Retain) Scroll Position on Button click using AngularJS in ASP.Net MVC

Last Reply 7 months ago By dharmendr

Posted 7 months ago

Hi,

After clicking of any tab it was scrolling to top of the page

my requirement i need to display only that particular content of tab and remaining should be fixed 

don't scroll to top of the page

could you please help me

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Active Bootstrap Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.carname = "Volvo";
            $scope.carname1 = "Volvo1";
            $scope.tabs = false;
            $scope.Add = function () {
                $scope.tabs = true;
                $scope.FormShown = 'Allowence';
                $scope.TabActived = 'Allowence';
            }
            $scope.ActiveTab = function (tab) {
                $scope.FormShown = tab;
                $scope.TabActived = tab;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="Add();" style="margin-left: 15px;" class="btn btn-Success btn-sm">
        Add
    </button>
    <br />
    <div class="well">
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
        <h2>Inline form with .sr-only class</h2>
        <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
            <div class="form-group">
                <label class="sr-only" for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br />
                <div ng-show="tabs">
            <div class="panel-heading">
                <div class="row">
                    <ul class="nav nav-pills">
                        <li ng-class="{'active': TabActived == 'Allowence'}">
                            <a href="#" ng-click="ActiveTab('Allowence')">
                                Allowence
                            </a>
                        </li>
                        <li ng-class="{'active': TabActived == 'Deduction'}">
                            <a href="#" ng-click="ActiveTab('Deduction')">
                                Deduction
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div ng-show="FormShown=='Allowence'">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="FormShown=='Deduction'">
        <h1>{{carname1}}</h1>
    </div>
</body>
</html>
You are viewing reply posted by: dharmendr 7 months ago.
Posted 7 months ago

Hi mahesh213,

You can use $window.scrollTo(x, y)

Where x is the pixel along the horizontal axis and y is the pixel along the vertical axis.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Maintain scroll position</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $window, $anchorScroll) {
            $scope.carname = "Volvo";
            $scope.carname1 = "Volvo1";
            $scope.tabs = false;
            $scope.Add = function () {
                $scope.tabs = true;
                $scope.FormShown = 'Allowence';
                $scope.TabActived = 'Allowence';
            }
            $scope.ActiveTab = function (tab) {
                $scope.FormShown = tab;
                $scope.TabActived = tab;
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                $window.scrollTo(0, scrollTop);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="Add();" style="margin-left: 15px;" class="btn btn-Success btn-sm">
        Add
    </button>
    <br />
    <div class="well">
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <h2>
            Inline form with .sr-only class</h2>
        <p>
            Make the viewport larger than 768px wide to see that all of the form elements are
            inline, left aligned, and the labels are alongside.</p>
        <form class="form-inline" action="/action_page.php">
        <div class="form-group">
            <label class="sr-only" for="email">
                Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="pwd">
                Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password"
                name="pwd" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember" />
                Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">
            Submit</button>
        </form>
        <br />
        <div ng-show="tabs">
            <div class="panel-heading">
                <div class="row">
                    <ul class="nav nav-pills">
                        <li ng-class="{'active': TabActived == 'Allowence'}"><a href="#" ng-click="ActiveTab('Allowence')">
                            Allowence </a></li>
                        <li ng-class="{'active': TabActived == 'Deduction'}"><a href="#" ng-click="ActiveTab('Deduction')">
                            Deduction </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div ng-show="FormShown=='Allowence'">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="FormShown=='Deduction'">
        <h1>{{carname1}}</h1>
    </div>
</body>
</html>

Demo