রুট পরিবর্তন করা নতুন পৃষ্ঠায় শীর্ষে স্ক্রোল করে না

Question

অন্ততপক্ষে আমার জন্য কিছু অনাকাঙ্ক্ষিত, রুট পরিবর্তনের সময় আচরণটি পেয়েছি। টিউটোরিয়ালটির 11 ধাপে http://angular.github.io/angular-phonecat/step-11/app/#/فون আপনি ফোনের তালিকা দেখতে পাবেন। যদি আপনি নীচে স্ক্রোল করেন এবং সর্বশেষের একটিতে ক্লিক করেন তবে আপনি দেখতে পারেন যে স্ক্রোলটি শীর্ষে নেই, পরিবর্তে মাঝখানে।

আমি এটি আমার অ্যাপ্লিকেশনগুলির একটিতেও পেয়েছি এবং আমি ভাবছিলাম যে আমি কীভাবে এটি শীর্ষে স্ক্রোল করতে পারি। আমি এটি ম্যানুয়ালি করতে পারি, তবে আমি মনে করি এটি করার জন্য অন্যান্য মার্জিত উপায় থাকা উচিত যা আমি জানি না।

সুতরাং, যখন রুটটি পরিবর্তন হবে তখন শীর্ষে স্ক্রোল করার কোনও মার্জিত উপায় আছে?

Answer 1

সমস্যাটি হ'ল আপনার এনজিভিউ কোনও নতুন ভিউ লোড করার সময় স্ক্রোল অবস্থান ধরে রাখে। আপনি $anchorScroll"ভিউ আপডেট হওয়ার পরে ভিউপোর্টটি স্ক্রোল করার" নির্দেশ দিতে পারেন ( ডক্সটি কিছুটা অস্পষ্ট তবে এখানে স্ক্রোলিংয়ের অর্থ নতুন দৃশ্যের শীর্ষে স্ক্রোলিং করা )।

সমাধান যোগ হয় autoscroll="true"আপনার ngView উপাদানে:

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

Comments

এই কাজটি আমার জন্য, পৃষ্ঠায় শীর্ষ থেকে উপরে স্ক্রোল করুন, তবে আমি স্মুথস্ক্রোল নির্দেশিকা সহ স্ক্রোলটো ব্যবহার করছি, উপরে স্মোথ স্ক্রোল করার কি উপায় আছে? পৃষ্ঠার শীর্ষে?

— xzegga

ডক্স স্থিতি যদি বৈশিষ্ট্যটি মান ব্যতীত সেট করা থাকে তবে স্ক্রোলিং সক্ষম করুন । সুতরাং আপনি কোডটি কেবল সংক্ষিপ্ত করতে পারেন <div class="ng-view" autoscroll></div>এবং এটি ঠিক একইভাবে কাজ করে (যদি না আপনি স্ক্রোলিংকে শর্তযুক্ত করতে চান)।

— ড্যানিয়েল লিয়ুজি

এটি আমার পক্ষে কাজ করে না, ডকটি বলে না যে এটি শীর্ষে যাবে

— পেনসিলচেক

আমি দেখতে পেয়েছি যদি অটস্ক্রোলটি সত্যে সেট করা থাকে তবে যখন কোনও ব্যবহারকারী 'পিছনে ফিরে যায়' তারা পৃষ্ঠার শীর্ষে ফিরে আসে, যেখানে তারা এটি রেখে দেয় না, যা অনাকাঙ্ক্ষিত আচরণ।

— axzr

এটি আপনার বিভাগটিকে এই বিভাগে স্ক্রোল করবে। সুতরাং এটি কেবল পৃষ্ঠার শীর্ষে স্ক্রোল করবে যদি এটি পৃষ্ঠার শীর্ষে হয়। অন্যথায় আপনাকে $window.scrollTo(0,0)$ stateChangeSuccess ইভেন্ট শ্রোতার মধ্যে দৌড়াতে হবে

— ফিলিপ সোবজাক

Answer 2

চালানোর জন্য এই কোডটি রাখুন

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

    window.scrollTo(0, 0);

});

Comments

$window.scrollTop(0,0)অটস্ক্রোলের চেয়ে আমার পক্ষে আরও ভাল কাজ করে। আমার ক্ষেত্রে আমার মতামত রয়েছে যা প্রবেশ এবং ট্রানজিশন সহ ছেড়ে যায়।

— ইসিড্রোএইচ

এটি আমার কাছে অটস্ক্রোল = "সত্য" এর চেয়েও ভাল কাজ করে। অটস্ক্রোলটি কোনও কারণে খুব দেরিতে হয়েছিল, নতুন দৃশ্যটি ইতিমধ্যে দৃশ্যমান হওয়ার পরে এটি শীর্ষে স্ক্রোল করবে।

— গ্রেগরি বলকেনস্টেজন

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে: $ রুটস্কোপ $ অন ('$ stateChangeSuccess', ফাংশন () {$ ("এইচটিএমএল, বডি") an অ্যানিমেট ({স্ক্রোলটপ: 0}, 200);});

— জেমস জেনেটস 25:19

$ window.scrollTop $ window.scrolTo হওয়া উচিত, অন্যথায় এটি বলে যে এটি বিদ্যমান নেই। এই সমাধান দুর্দান্ত কাজ করে!

— সফটওয়্যার নবীগণ

@ জেমসজেঞ্জস আমারও এটির দরকার ছিল। ধন্যবাদ।

— ম্যাকেনজি ব্রাউন

Answer 3

এই কোডটি আমার পক্ষে দুর্দান্ত কাজ করেছে .. আমি আশা করি এটি আপনার পক্ষেও দুর্দান্ত কাজ করবে .. আপনাকে যা করতে হবে তা হল কেবল আপনার রান ব্লকে অ্যাঙ্করস্ক্রোল করা এবং নীচের উদাহরণে যেমন করলাম তেমনি রুটস্কোপে শ্রোতার ফাংশন প্রয়োগ করুন ..

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

এখানে Angularjs মডিউলটির কলিং অর্ডার রয়েছে:

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

এটি আমার ব্যবহারের ক্ষেত্রে দুর্দান্ত কাজ করে। আমি নেস্টেড ভিউগুলি (বেশ কয়েকটি স্তর গভীর) সহ কৌনিক ইউআই-রাউটার ব্যবহার করছি। ধন্যবাদ!

— জোশুয়া পাওয়েল

এফওয়াইআই - পুশস্টেট ব্যবহার করার জন্য আপনার কৌণিকের মধ্যে এইচটিএমএল 5 মোডে থাকা দরকার: $locationProvider.html5Mode(true); @Wkronkel কৌণিক ক্ষেত্রে HTML5 মোড ব্যবহার না করে এটি সম্পাদন করার কোনও উপায় আছে? এইচটিএমএল 5 মোড সক্রিয় থাকার কারণে পৃষ্ঠা পুনরায় লোড 404 ত্রুটি নিক্ষেপ করছে

— ব্রিটসটোফার

@ ব্রিটজথের আপনি অন্তর্নির্মিত ইভেন্টগুলিতে ঝাঁকুনি দিয়ে নিজের ইতিহাস বজায় রাখতে পারবেন, তাই না?

— কেসি

আপনি এটি কোথায় যুক্ত .runকরবেন? কৌণিক আপনার appবস্তু?

— ফিল্ল_টি

@ ফিলিল_টি: হ্যাঁ, runফাংশনটি প্রতিটি কৌণিক মডিউল অবজেক্টে উপলব্ধ একটি পদ্ধতি।

— হিনরিচ

Answer 5

এটি আমার (আপাতদৃষ্টিতে) দৃ rob়, সম্পূর্ণ এবং (মোটামুটি) সংক্ষিপ্ত সমাধান। এটি মিনিফিকেশন সামঞ্জস্যপূর্ণ স্টাইল (এবং কৌণিক.মডিউল (NAME) আপনার মডিউলে অ্যাক্সেস) ব্যবহার করে।

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

PS আমি খুঁজে পেয়েছি যে অটস্ক্রোল জিনিসটি সত্য বা মিথ্যাতে সেট থাকলেও তার কোনও প্রভাব নেই।

Comments

হুমমম .. এটি প্রথমে উপরে দৃশ্যটি স্ক্রোল করে এবং তারপরে আমার জন্য স্ক্রিনে দৃশ্য পরিবর্তন হয়।

— স্ট্র্লোক

পরিষ্কার সমাধান আমি খুঁজছিলাম। আপনি যদি "পিছনে" ক্লিক করেন তবে এটি আপনাকে যেখানে ছেড়ে দিয়েছিল সেখানে নিয়ে যায় - এটি কারওর পক্ষে পছন্দসই নয়, তবে আমার ক্ষেত্রে এটি আমার পছন্দ।

— mਜcece91

Answer 6

অ্যাঙ্গুলারস ইউআই রাউটার ব্যবহার করে, আমি যা করছি তা হ'ল:

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

সঙ্গে:

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

এটি কোনও পৃষ্ঠায় কখনই ব্যর্থ হয় না এবং এটি বিশ্বব্যাপীও নয়।

Comments

দুর্দান্ত ধারণা, আপনি এটি ব্যবহার করে এটি আরও খাটো করতে পারেন:onEnter: scrollContent

— 8-15 এ জাকার

আপনি যেখানে লিখেছেন সেখানে কি রাখবেন // Your favorite scroll method here?

— এজেন্ট জেব্রা

ভাল সময়: আমি ইউআই-রাউটার-শিরোনাম চেষ্টা করে আসল কোডে এই মন্তব্যের উপরে দুটি লাইন ছিলাম । আমি ব্যবহার করি $('html, body').animate({ scrollTop: -10000 }, 100);

— পেলেটিয়ার

হাহাহা, দুর্দান্ত! আশ্চর্যের বিষয়, এটি আমার জন্য সর্বদা কার্যকর হয় না। আমার কিছু মতামত রয়েছে যেগুলি সংক্ষিপ্ত আকারে তাদের কোনও স্ক্রোল নেই এবং দুটি দর্শন রয়েছে যার একটি স্ক্রোল রয়েছে, যখন আমি onEnter: scrollContentপ্রতিটি দৃশ্যে রাখি তবে এটি কেবল প্রথম দর্শন / রুটেই কাজ করে, দ্বিতীয়বার নয়। স্ট্রেঞ্জ।

— এজেন্ট জেব্রা

আমি নিশ্চিত না, না, এটি যখন করা উচিত তখন কেবল শীর্ষে যায় না। আমি যখন 'রুটগুলি' এর মধ্যে ক্লিক করি তখন তাদের কয়েকটি এখনও এনকোলিং পৃষ্ঠার নিখুঁত শীর্ষের চেয়ে এনজি-ভিউ যেখানে রয়েছে সেখানে স্ক্রোল করছে। যে জানার জন্য?

— এজেন্ট জেব্রা

Answer 7

শিরোনামে বর্ণিত সমস্যাটি যে কারও কাছে আসার জন্য এফওয়াইআই (যেমনটি আমি করেছি) যারা অ্যাঙ্গুলারআইআই রাউটার প্লাগইনটিও ব্যবহার করছে ...

যেমন এই জিজ্ঞাসা প্রশ্নে জিজ্ঞাসা করা হয়েছে এবং উত্তর দেওয়া হয়েছে, আপনি রুটগুলি পরিবর্তন করার সময় কৌণিক-ইউআই রাউটার পৃষ্ঠার নীচে লাফিয়ে যায়।
নীচে পৃষ্ঠাটি কেন লোড করা যায় তা বুঝতে পারছি না? কৌণিক UI- রাউটার অটস্ক্রোল সমস্যা

তবে, উত্তর হিসাবে বলা আছে, আপনি নিজের 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

আচ্ছা, এটি কৌণিকের মধ্যে এত সহজ নয়। আপনার সমাধানটি কেবল jquery এ বৈধ। আমি যা খুঁজছি তা কৌণিক বিষয়গুলিতে এটি করার একটি মার্জিত উপায়

— মাতিয়াস গঞ্জালেজ

আপনি কি $ অ্যাঙ্করস্ক্রোল () ব্যবহার করার চেষ্টা করেছেন, এটি ডকুমেন্টেড ডকস.অঙ্গুলারজএস.আর.পি.আই.এন ।

— কোডআইসলাইফ

আপনার সাথে একটি অবস্থান নির্দিষ্ট অবগতির জন্য যদি $location.hash('top')সামনে $anchorScroll()ডিফল্ট এগিয়ে / ফিরে ব্রাউজার বোতাম আর কাজ; তারা আপনাকে ইউআরএলে

— রায়

Answer 9

আপনি যদি ইউআই-রাউটার ব্যবহার করেন তবে আপনি (চলমান) ব্যবহার করতে পারেন

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

Comments

আমি জানি এটির কাজ করা উচিত, আমি ব্যাপকভাবে "$ stateChangeSuccess" ব্যবহার করছি তবে কোনও কারণে উইন্ডো.স্ক্রোলটো (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

অটোস্ক্রোলকে সত্যে সেট করা আমার পক্ষে কৌশল নয়, তাই আমি অন্য একটি সমাধান বেছে নিয়েছি। আমি এমন একটি পরিষেবা তৈরি করেছি যা প্রতিবার রুট পরিবর্তিত হয় এবং এটি শীর্ষে স্ক্রোল করার জন্য অন্তর্নির্মিত ch অ্যাঙ্করস্ক্রোল পরিষেবাটি ব্যবহার করে। আমার জন্য কাজ কর :-).

সার্ভিস:

 (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

পার্টিতে কিছুটা দেরি হয়ে গেছে, তবে আমি প্রতিটি সম্ভাব্য পদ্ধতি চেষ্টা করেছি এবং কিছুই সঠিকভাবে কার্যকর হয়নি। এখানে আমার মার্জিত সমাধান:

আমি এমন একটি নিয়ামক ব্যবহার করি যা আমার সমস্ত পৃষ্ঠাগুলি ইউআই-রাউটার দিয়ে পরিচালনা করে। এটি আমাকে এমন ব্যবহারকারীদের পুনর্নির্দেশের অনুমতি দেয় যা প্রামাণিক বা যথাযথ স্থানে বৈধ নয়। বেশিরভাগ লোকেরা তাদের মিডলওয়্যারগুলি তাদের অ্যাপ্লিকেশনটির কনফিগারেশনে রাখে তবে আমার কিছু HTTP অনুরোধের প্রয়োজন ছিল, সুতরাং একটি গ্লোবাল নিয়ামক আমার পক্ষে আরও ভাল কাজ করে।

আমার সূচক 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করছেন তা সেট করুন । তবে আমি মনে করি বেশিরভাগ লোকেরা যদি আপনি পৃষ্ঠাটিতে "নতুন" হিসাবে যান তবে পুরো পৃষ্ঠাটি স্ক্রোল করতে চাইবে।

উপরেরটিতে ইউআই-রাউটার ব্যবহার করা হয়েছে, যদিও আপনি এর $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 } }) আমি কেবল এই জিনিসটি শিখছি, সম্ভবত আমি কিছু মিস করছি: ডি

— এজেন্ট জেব্রা

@ এজেন্টজেব্রা ন্যূনতম সময়ে, নিয়ামককে ইনপুট হিসাবে $ টাইমআউট গ্রহণ করতে হবে (যেহেতু আমার কোডটি এটি উল্লেখ করেছে) তবে সম্ভবত আরও গুরুত্বপূর্ণটি যে, আমি যে নিয়ামকটির কথা উল্লেখ করছি তা একটি পৃথক রাষ্ট্রের উপরে স্তরে বাস করা দরকার (আপনি আপনার শীর্ষ-স্তরের নিয়ামকের মধ্যে বিবৃতি অন্তর্ভুক্ত করতে পারে)। প্রাথমিক অ্যাঙ্গুলারজেএস শেখার বক্ররেখা সত্যই খুব কঠিন; শুভকামনা!

— Dev93

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);
                }

            })
        }
    };
}]);

আমি আমার ভিউতে এটি নীচে sertedোকালাম:

<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/ $ ionicScrolDelegate / ব্যবহার করে দেখুন

এটি তালিকার শীর্ষে স্ক্রোলটপ করে স্ক্রোলটপ ()

Answer 17

আমার যা প্রয়োজন তা শেষ পর্যন্ত পেয়েছি।

আমার শীর্ষে স্ক্রোল করা দরকার, তবে কিছু ট্রানজিশন না করতে চেয়েছিলাম

আপনি রুট-বাই-রুট স্তরে এটি নিয়ন্ত্রণ করতে পারেন।
আমি উপরের সমাধানটি @ wkonkel দ্বারা একত্রিত করছি এবং noScroll: trueকিছু রুট ঘোষণায় একটি সাধারণ পরামিতি যুক্ত করছি। তারপরে আমি সেই পরিবর্তনটি ধরছি।

সব মিলিয়ে: এটি নতুন ট্রানজিশনে পৃষ্ঠার শীর্ষে ভাসমান, এটি ট্রানজিশন Forward/ Backট্রান্সজিশনে শীর্ষে ভাসবে না এবং প্রয়োজনে আপনাকে এই আচরণটি ওভাররাইড করতে দেয়।

কোড: (পূর্ববর্তী সমাধানের সাথে একটি অতিরিক্ত নসক্রোল বিকল্প)

  // 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" >