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

Last Reply 10 months ago By dharmendr

Posted 10 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>
This question does not have replies that have been liked.