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

Last Reply 23 days ago By dharmendr

Posted 23 days 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>
Posted 23 days 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