ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Maintain (Retain) Scroll Position on Button click using AngularJS in ASP.Net MVC<p>Hi <a class="username" rel="mahesh213"> mahesh213</a>,</p> <p>You can use $window.scrollTo(x, y)</p> <p>Where x is the pixel along the horizontal axis and y is the pixel along the vertical axis.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;Maintain scroll position&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;myApp&#39;, []); app.controller(&#39;myCtrl&#39;, function ($scope, $window, $anchorScroll) { $scope.carname = &#34;Volvo&#34;; $scope.carname1 = &#34;Volvo1&#34;; $scope.tabs = false; $scope.Add = function () { $scope.tabs = true; $scope.FormShown = &#39;Allowence&#39;; $scope.TabActived = &#39;Allowence&#39;; } $scope.ActiveTab = function (tab) { $scope.FormShown = tab; $scope.TabActived = tab; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; $window.scrollTo(0, scrollTop); } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;myApp&#34; ng-controller=&#34;myCtrl&#34;&gt; &lt;button ng-click=&#34;Add();&#34; style=&#34;margin-left: 15px;&#34; class=&#34;btn btn-Success btn-sm&#34;&gt; Add &lt;/button&gt; &lt;br /&gt; &lt;div class=&#34;well&#34;&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;h2&gt; Inline form with .sr-only class&lt;/h2&gt; &lt;p&gt; Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt; &lt;form class=&#34;form-inline&#34; action=&#34;/action_page.php&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;email&#34;&gt; Email:&lt;/label&gt; &lt;input type=&#34;email&#34; class=&#34;form-control&#34; id=&#34;email&#34; placeholder=&#34;Enter email&#34; name=&#34;email&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;sr-only&#34; for=&#34;pwd&#34;&gt; Password:&lt;/label&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; id=&#34;pwd&#34; placeholder=&#34;Enter password&#34; name=&#34;pwd&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;checkbox&#34;&gt; &lt;label&gt; &lt;input type=&#34;checkbox&#34; name=&#34;remember&#34; /&gt; Remember me&lt;/label&gt; &lt;/div&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-default&#34;&gt; Submit&lt;/button&gt; &lt;/form&gt; &lt;br /&gt; &lt;div ng-show=&#34;tabs&#34;&gt; &lt;div class=&#34;panel-heading&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;ul class=&#34;nav nav-pills&#34;&gt; &lt;li ng-class=&#34;{&#39;active&#39;: TabActived == &#39;Allowence&#39;}&#34;&gt;&lt;a href=&#34;#&#34; ng-click=&#34;ActiveTab(&#39;Allowence&#39;)&#34;&gt; Allowence &lt;/a&gt;&lt;/li&gt; &lt;li ng-class=&#34;{&#39;active&#39;: TabActived == &#39;Deduction&#39;}&#34;&gt;&lt;a href=&#34;#&#34; ng-click=&#34;ActiveTab(&#39;Deduction&#39;)&#34;&gt; Deduction &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div ng-show=&#34;FormShown==&#39;Allowence&#39;&#34;&gt; &lt;h1&gt;{{carname}}&lt;/h1&gt; &lt;/div&gt; &lt;div ng-show=&#34;FormShown==&#39;Deduction&#39;&#34;&gt; &lt;h1&gt;{{carname1}}&lt;/h1&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/406506/Maintain-Retain-Scroll-Position-on-Button-click-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/406506/Maintain-Retain-Scroll-Position-on-Button-click-using-AngularJS-in-ASPNet-MVC/Fri, 23 Aug 2019 07:22:33 GMT