मार्ग बदलने से नए पृष्ठ में शीर्ष पर स्क्रॉल नहीं होता है

Question

मैंने कुछ अवांछित पाया है, कम से कम मेरे लिए, व्यवहार जब मार्ग बदलता है। ट्यूटोरियल http://angular.github.io/angular-phonecat/step-11/app/#/phones के चरण 11 में आप फोन की सूची देख सकते हैं। यदि आप नीचे स्क्रॉल करते हैं और नवीनतम में से एक पर क्लिक करते हैं, तो आप देख सकते हैं कि स्क्रॉल शीर्ष पर नहीं है, इसके बजाय मध्य में है।

मैंने इसे अपने एक ऐप में भी पाया है और मैं सोच रहा था कि मैं इसे शीर्ष पर स्क्रॉल करने के लिए कैसे प्राप्त कर सकता हूं। मैं इसे मैन्युअल रूप से कर सकता हूं, लेकिन मुझे लगता है कि ऐसा करने के लिए अन्य सुरुचिपूर्ण तरीका होना चाहिए जो मुझे नहीं पता है।

तो, क्या मार्ग बदलने पर शीर्ष पर स्क्रॉल करने का एक सुंदर तरीका है?

Answer 1

समस्या यह है कि जब नया दृश्य लोड होता है तो आपका ngView स्क्रॉल स्थिति को बनाए रखता है। आप $anchorScroll"दृश्य के अपडेट होने के बाद व्यूपोर्ट को स्क्रॉल करने का निर्देश दे सकते हैं " ( डॉक्स थोड़ा अस्पष्ट हैं, लेकिन यहां स्क्रॉल करने का मतलब है कि नए दृश्य के शीर्ष पर स्क्रॉल करना )।

समाधानautoscroll="true" आपके ngView तत्व में जोड़ने के लिए है:

<div class="ng-view" autoscroll="true"></div>

Comments

मेरे लिए यह काम, पेज को ऊपर तक स्क्रॉल करता है, लेकिन मैं स्क्रॉलकोड को smoothScroll निर्देश के साथ उपयोग कर रहा हूं, क्या शीर्ष पर एक स्मूथ स्क्रॉल करने का कोई तरीका है? पृष्ठ के उपर?

— xzegga

डॉक्स स्थिति यदि विशेषता बिना मान के सेट की गई है, तो स्क्रॉलिंग सक्षम करें । इसलिए आप कोड को छोटा कर सकते हैं <div class="ng-view" autoscroll></div>और यह सिर्फ उसी तरह काम करता है (जब तक आप स्क्रॉलिंग सशर्त नहीं बनाना चाहते थे)।

— डैनियल लियुज़ी

यह मेरे लिए काम नहीं करता है, डॉक्टर का कहना है कि यह शीर्ष पर स्क्रॉल नहीं करेगा

— पेंसिलेंक

मुझे लगता है कि अगर ऑटोस्कोप सच में सेट हो जाता है तो जब कोई उपयोगकर्ता 'वापस जाता है' तो वे पृष्ठ के शीर्ष पर लौट आते हैं, न कि वे इसे छोड़ देते हैं, जो कि अवांछित व्यवहार है।

— axzr

यह इस div पर आपके विचार को स्क्रॉल करेगा। तो यह पृष्ठ के शीर्ष पर स्क्रॉल करेगा यदि यह पृष्ठ के शीर्ष पर होता है। अन्यथा आपको $window.scrollTo(0,0)$ StateChangeSuccess इवेंट श्रोता में चलना होगा

— फिलिप

Answer 2

बस इस कोड को चलाने के लिए डाल दिया

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Comments

$window.scrollTop(0,0)मेरे लिए ऑटोस्कोप से बेहतर काम करता है। मेरे मामले में मेरे विचार हैं कि संक्रमण के साथ प्रवेश करें और छोड़ें।

— IsidroGH

यह मेरे लिए ऑटोस्कोप = "सच" की तुलना में बेहतर काम करता है। किसी कारण से ऑटोस्कोप बहुत देर हो चुकी थी, नए दृश्य के पहले से ही दिखाई देने के बाद यह शीर्ष पर स्क्रॉल करेगा।

— ग्रेगरी बोल्केनस्टीजन

इसने मेरे लिए सबसे अच्छा काम किया: $ rootScope। $ on ('$ StateChangeSuccess', function () {$ ("html, body")। चेतन ({स्क्रॉलटॉप: 0}, 200);});

— बजे जेम्स जेंट्स

$ window.scrollTop $ window.scrollTo होना चाहिए, अन्यथा यह कहता है कि इसका अस्तित्व नहीं है। यह समाधान महान काम करता है!

— सॉफ्टवेयर पैगम्बर

@JamesGentes मुझे भी इसकी ज़रूरत थी। धन्यवाद।

— मैकेंज़ी ब्राउन

Answer 3

इस कोड ने मेरे लिए बहुत अच्छा काम किया। मुझे उम्मीद है कि यह आपके लिए भी बहुत अच्छा होगा। आपको बस इतना करना है कि अपने रन ब्लॉक में $ लंगर डालें और श्रोता फ़ंक्शन को रूटस्स्कोप पर लागू करें जैसे मैंने नीचे दिए उदाहरण में किया है।

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

यहां एंगुलरजस मॉड्यूल का कॉलिंग ऑर्डर दिया गया है:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

रनर ब्लॉक इंजेक्टर बनने के बाद निष्पादित हो जाता है और एप्लिकेशन को किकस्टार्ट करने के लिए उपयोग किया जाता है .. इसका मतलब है कि जब आप नए मार्ग दृश्य पर पुनर्निर्देशित होते हैं, तो रन ब्लॉक में श्रोता कॉल करता है

$ AnchorScroll ()

और अब आप देख सकते हैं कि स्क्रॉल नए रूड व्यू के साथ शीर्ष पर शुरू होता है :)

Comments

अंत में, एक समाधान जो चिपचिपा हेडर के साथ काम कर रहा है! धन्यवाद!

— फैबियो

Answer 4

एक या दो घंटे के हर संयोजन की कोशिश कर के बाद ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), और कई अन्य, मैं स्क्रॉल करने वाली शीर्ष-ऑन-नई-पेज काम करने के लिए नहीं मिल सका अपेक्षा के अनुरूप।

यह आखिरकार मेरे लिए क्या था। यह पुशस्टेट और रीप्लेस्ट को कैप्चर करता है और जब नए पेज नेविगेट किए जाते हैं (केवल स्क्रॉल बटन को बनाए रखने के लिए बैकग्राउंड / फॉरवर्ड बटन) अपडेट किया जाता है:

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

Comments

यह मेरे उपयोग के मामले के लिए बहुत अच्छा काम करता है। मैं नेस्टेड यूआई-राउटर का उपयोग नेस्टेड दृश्यों (कई स्तरों गहरे) के साथ कर रहा हूं। धन्यवाद!

— जोशुआ पावेल

FYI करें - आपको पुशस्टेट का उपयोग करने के लिए कोणीय में HTML5 मोड में होना चाहिए: $locationProvider.html5Mode(true); @wkronkel कोणीय में HTML5 मोड का उपयोग नहीं करने पर इसे पूरा करने का एक तरीका है? Html 5 मोड सक्रिय होने के कारण पृष्ठ पुनः लोड 404 त्रुटियां फेंक रहा है

— britztopher

@britztopher आप अंतर्निहित ईवेंट में हुक कर सकते हैं और अपना इतिहास बनाए रख सकते हैं, है ना?

— केसी

आप इसे कहां जोड़ते हैं .run? कोणीय आपकी appवस्तु?

— Philll_t

@Philll_t: हाँ, runफ़ंक्शन हर कोणीय मॉड्यूल ऑब्जेक्ट पर उपलब्ध एक विधि है।

— हेनरिक

Answer 5

यहाँ मेरा (प्रतीत होता है) मजबूत, पूर्ण और (काफी) संक्षिप्त समाधान है। यह आपके मॉड्यूल के लिए न्यूनतम संगत शैली (और angular.module (NAME) एक्सेस) का उपयोग करता है।

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

पीएस मैंने पाया कि ऑटोस्कोप वाली चीज़ का कोई असर नहीं पड़ा था कि क्या यह सच है या गलत।

Comments

हम्मम .. यह दृश्य को पहले शीर्ष पर ले जाता है और फिर मेरे लिए स्क्रीन पर दृश्य बदल जाता है।

— स्ट्रीलोक

स्वच्छ समाधान मैं देख रहा था। यदि आप "वापस" पर क्लिक करते हैं, तो यह आपको उस स्थान पर ले जाता है जहां से आपने छोड़ा था - यह कुछ के लिए वांछनीय नहीं हो सकता है, लेकिन मुझे मेरे मामले में यह पसंद है।

— mjoyce91

Answer 6

कोणीयjs यूआई रूटर का उपयोग करते हुए, मैं यह क्या कर रहा हूं:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

साथ में:

var scrollContent = function() {
    // Your favorite scroll method here
};

यह किसी भी पृष्ठ पर कभी भी विफल नहीं होता है, और यह वैश्विक नहीं है।

Comments

महान विचार, आप इसे कम उपयोग करके छोटा कर सकते हैं:onEnter: scrollContent

— zucker

आपने जहां लिखा था, वहां क्या रखा है // Your favorite scroll method here?

— एजेंट ज़ेबरा

अच्छा समय: मैं मूल कोड में इस टिप्पणी के ऊपर दो लाइनें थी, ui-रूटर-शीर्षक की कोशिश कर रहा था । मैं उपयोग करता हूं $('html, body').animate({ scrollTop: -10000 }, 100);

— लीन पेल्लेटियर

हा, महान! अजीब बात है, यह मेरे लिए हर समय काम नहीं करता है। मेरे पास कुछ विचार हैं जो बहुत कम हैं, उनमें एक स्क्रॉल नहीं है, और दो दृश्य जिनके पास एक स्क्रॉल है, जब मैं onEnter: scrollContentप्रत्येक दृश्य पर रखता हूं तो यह केवल पहले दृश्य / मार्ग पर काम करता है, दूसरा नहीं। अजीब।

— एजेंट ज़ेबरा

मुझे यकीन नहीं है, नहीं, यह बस शीर्ष पर स्क्रॉल नहीं करता है जब इसे करना चाहिए। जब मैं 'मार्गों' के बीच क्लिक करता हूं तो उनमें से कुछ अभी भी स्क्रॉल कर रहे हैं कि एनकाउंटर पृष्ठ के पूर्ण शीर्ष के बजाय एनजी-व्यू कहां है। क्या इसका कोई मतलब है?

— एजेंट ज़ेबरा

Answer 7

शीर्षक में वर्णित किसी भी समस्या के लिए FYI करें (जैसा कि मैंने किया) जो AngularUI Router प्लगइन का उपयोग कर रहा है ...

जैसा कि इस SO प्रश्न में पूछा और उत्तर दिया गया है, जब आप मार्ग बदलते हैं तो कोणीय-यूआई राउटर पृष्ठ के नीचे कूदता है।
यह पता नहीं लगा सकते कि पृष्ठ नीचे क्यों लोड है? कोणीय यूआई-राउटर ऑटोस्कोप इश्यू

हालाँकि, जैसा कि उत्तर में कहा गया है, आप इस व्यवहार autoscroll="false"को अपने कहने पर बंद कर सकते हैं ui-view।

उदाहरण के लिए:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

Comments

मेरा नीचे की ओर नहीं कूदना है, यह सिर्फ शीर्ष पर जाने के बजाय स्क्रॉल स्थिति को बनाए रखता है।

— स्टीफन स्मिथ

इस सवाल का जवाब नहीं है। मुझे एक ही समस्या है - जब मार्ग में परिवर्तन होता है तो स्क्रॉल स्तर केवल शीर्ष पर स्क्रॉल करने के बजाय उसी स्थान पर रहता है। मैं इसे शीर्ष पर स्क्रॉल करने के लिए प्राप्त कर सकता हूं, लेकिन केवल हैश को बदलकर, जो मैं स्पष्ट कारणों से नहीं करना चाहता।

— विल

Answer 8

आप इस जावास्क्रिप्ट का उपयोग कर सकते हैं

$anchorScroll()

Comments

खैर, यह angularjs में उतना आसान नहीं है। आपका समाधान केवल jquery में मान्य है। मैं क्या देख रहा हूँ, यह एंगुलरज में ऐसा करने का एक सुंदर तरीका है

— मतियास गोंजालेज

क्या आपने $ anchorScroll () का उपयोग करने की कोशिश की है, यह docs.angularjs.org/api/ng.%24anchorScroll दस्तावेज़ित है ।

— कोडआईलाइफ

FYI करें यदि आप डिफ़ॉल्ट फ़ॉर्वर्ड / बैक ब्राउज़र बटन $location.hash('top')से पहले किसी स्थान को निर्दिष्ट करते हैं जो $anchorScroll()अब काम नहीं करता है; वे आपको URL पर हैश में

— रॉय

Answer 9

यदि आप यूआई-राउटर का उपयोग करते हैं तो आप उपयोग कर सकते हैं (रन पर)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

Comments

मुझे पता है कि यह काम करना चाहिए, मैं बड़े पैमाने पर "$ StateChangeSuccess" का उपयोग कर रहा हूं, लेकिन किसी कारण से $ window.scrollTo (0,0) उस के साथ काम नहीं कर रहा है।

— आभास

Answer 10

मुझे इसका हल मिल गया। यदि आप किसी नए दृश्य पर जाते हैं, तो फ़ंक्शन निष्पादित हो जाता है।

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

Answer 11

AutoScroll को true पर सेट करना मेरे लिए ट्रिक नहीं था, इसलिए मैंने दूसरा उपाय चुना। मैंने एक ऐसी सेवा का निर्माण किया, जिसमें हर बार मार्ग बदलता रहता है और शीर्ष पर स्क्रॉल करने के लिए बिल्ट-इन $ लंगर सेवा का उपयोग किया जाता है। मेरे लिये कार्य करता है :-)।

सर्विस:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

पंजीकरण:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

Answer 12

पार्टी में थोड़ी देर हो गई है, लेकिन मैंने हर संभव तरीका आजमाया है, और कुछ भी सही तरीके से काम नहीं किया है। यहाँ मेरा सुरुचिपूर्ण समाधान है:

मैं एक नियंत्रक का उपयोग करता हूं जो ui- राउटर के साथ मेरे सभी पृष्ठों को नियंत्रित करता है। यह मुझे उन उपयोगकर्ताओं को पुनर्निर्देशित करने की अनुमति देता है, जो उचित स्थान पर प्रमाणित या मान्य नहीं हैं। अधिकांश लोग अपने ऐप के कॉन्फ़िगरेशन में अपना मिडलवेयर डालते हैं, लेकिन मुझे कुछ http अनुरोधों की आवश्यकता है, इसलिए एक वैश्विक नियंत्रक मेरे लिए बेहतर काम करता है।

मेरा index.html इस तरह दिखता है:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

मेरा initCtrl.js ऐसा दिखता है:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

मैंने हर संभव विकल्प की कोशिश की है, यह तरीका सबसे अच्छा काम करता है।

Comments

यह एकमात्र ऐसा है जो मेरे लिए कोणीय-सामग्री के साथ काम करता id="top-nav"है, सही तत्व पर रखना भी महत्वपूर्ण था।

— बैटरीएकिड

Answer 13

उपरोक्त सभी उत्तर, अपेक्षित ब्राउज़र व्यवहार को तोड़ते हैं। अधिकांश लोग जो चाहते हैं वह ऐसा है जो "नया" पृष्ठ होने पर शीर्ष पर स्क्रॉल करेगा, लेकिन पिछली स्थिति में वापस आ जाएगा यदि आप बैक (या फॉरवर्ड) बटन के माध्यम से वहां पहुंच रहे हैं।

यदि आप एचटीएमएल 5 मोड मानते हैं, तो यह आसान हो जाता है (हालांकि मुझे यकीन है कि कुछ उज्ज्वल लोग यह पता लगा सकते हैं कि इसे और अधिक सुरुचिपूर्ण कैसे बनाया जाए!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

जिस तरह से यह काम करता है कि राउटर मानता है कि यह शीर्ष पर स्क्रॉल करने जा रहा है, लेकिन ब्राउज़र को खत्म करने का मौका देने में थोड़ी देरी करता है। यदि ब्राउज़र तब हमें सूचित करता है कि परिवर्तन बैक / फॉरवर्ड नेविगेशन के कारण हुआ था, तो यह टाइमआउट रद्द कर देता है, और स्क्रॉल कभी नहीं होता है।

मैंने documentस्क्रॉल करने के लिए कच्चे कमांड का उपयोग किया क्योंकि मैं विंडो के पूरे शीर्ष पर जाना चाहता हूं। यदि आप चाहते हैं कि आपकी ui-viewपुस्तक स्क्रॉल हो जाए, तो सेट करें autoscroll="my_var"कि आप my_varऊपर दी गई तकनीकों का उपयोग करके कहां नियंत्रित करते हैं। लेकिन मुझे लगता है कि अगर आप पृष्ठ पर "नए" के रूप में जा रहे हैं तो अधिकांश लोग पूरे पृष्ठ को स्क्रॉल करना चाहेंगे।

इसके बाद के संस्करण का उपयोग करता है ui रूटर, हालांकि आप के बजाय स्वैप करके एनजी मार्ग इस्तेमाल कर सकते हैं $routeChangeSuccessके लिए $stateChangeSuccess।

Comments

आप इसे कैसे लागू करेंगे? आप इसे नियमित कोणीय-यूआई मार्गों के कोड में कहां डालेंगे जैसे कि निम्नलिखित? var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/home'); $locationProvider.html5Mode(false).hashPrefix(""); $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('home', { url: '/home', templateUrl: 'partial-home.html' }) });

— एजेंट ज़ेबरा

हम्म् ... काम नहीं किया :-( यह सिर्फ एप्लिकेशन को मारता है। .state('web', { url: '/webdev', templateUrl: 'partial-web.html', controller: function($scope) { $scope.clients = ['client1', 'client2', 'client3']; // I put it here } }) मैं सिर्फ इस सामान को सीख रहा हूं, शायद मुझे कुछ याद आ रहा है: डी

— एजेंट ज़ेबरा

@AgentZebra कम से कम, नियंत्रक को इनपुट के रूप में $ टाइमआउट लेने की आवश्यकता है (क्योंकि मेरा कोड इसे संदर्भित करता है), लेकिन शायद इससे भी महत्वपूर्ण बात यह है कि जिस नियंत्रक का मैं उल्लेख कर रहा हूं वह एक व्यक्तिगत स्तर से ऊपर के स्तर पर रहने की आवश्यकता है (आप अपने शीर्ष-स्तरीय नियंत्रक में कथन शामिल कर सकते हैं)। प्रारंभिक AngularJS सीखने की अवस्था वास्तव में बहुत कठिन है; सौभाग्य!

— देव ३

Answer 14

उत्तर दिए गए किसी भी मुद्दे ने मेरी समस्या हल नहीं की। मैं विचारों के बीच एक एनीमेशन का उपयोग कर रहा हूं और स्क्रॉल हमेशा एनीमेशन के बाद होगा। समाधान मैंने पाया कि एनीमेशन से पहले शीर्ष पर स्क्रॉल करना निम्न निर्देश है:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

मैंने इसे अपने विचार पर इस प्रकार डाला:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

Answer 15

सरल समाधान, scrollPositionRestorationसक्षम मुख्य मार्ग मॉड्यूल में जोड़ें ।
ऐशे ही:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

Answer 16

यह कोशिश करें http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

यह सूची स्क्रॉल के शीर्ष पर स्क्रॉल करता है ()

Answer 17

मुझे आखिरकार मेरी जरूरत है।

मुझे शीर्ष पर स्क्रॉल करने की आवश्यकता थी, लेकिन कुछ बदलाव चाहते थे कि नहीं

आप इसे रूट-बाय-रूट स्तर पर नियंत्रित कर सकते हैं।
मैं @wkonkel द्वारा उपरोक्त समाधान जोड़ रहा हूं और एक सरल जोड़ रहा हूंnoScroll: true कुछ मार्ग घोषणाओं के लिए पैरामीटर । तब मैं संक्रमण में उसे पकड़ रहा हूं।

सभी सभी में: यह नए बदलावों पर पृष्ठ के शीर्ष पर तैरता है, यह शीर्ष पर Forward/ Backबदलावों पर नहीं तैरता है , और यह आपको आवश्यक होने पर इस व्यवहार को ओवरराइड करने की अनुमति देता है।

कोड: (पिछले समाधान प्लस एक अतिरिक्त noScroll विकल्प)

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

इसे अपने app.runब्लॉक में डालें और इंजेक्ट करें $state...myApp.run(function($state){...})

फिर, यदि आप पृष्ठ के शीर्ष पर स्क्रॉल नहीं करना चाहते हैं, तो इस तरह से एक मार्ग बनाएँ:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

Answer 18

इसने मेरे लिए ऑटोस्कोप सहित काम किया

<div class="ngView" autoscroll="true" >