জাভাস্ক্রিপ্ট / jQuery দিয়ে পৃষ্ঠার শীর্ষে কীভাবে স্ক্রোল করবেন?

Question

জাভাস্ক্রিপ্ট / jQuery এর সাথে ব্রাউজারের স্ক্রোলিং নিয়ন্ত্রণ করার কোনও উপায় আছে কি?

আমি যখন আমার পৃষ্ঠাটি অর্ধেক নীচে নেমে স্ক্রোল করব, তারপরে একটি পুনরায় লোড ট্রিগার করুন, আমি চাই পৃষ্ঠাটি শীর্ষে প্যাক করা উচিত, তবে পরিবর্তে এটি শেষ স্ক্রোল অবস্থানটি সন্ধান করার চেষ্টা করে। সুতরাং আমি এটি করেছি:

$('document').ready(function() {
   $(window).scrollTop(0);
});

তবে ভাগ্য নেই।

সম্পাদনা :

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

সুতরাং ফলোআপটি হল, ব্রাউজারটি তার অতীতের অবস্থানে স্ক্রোল করে বাঁচানোর কোনও উপায় আছে বা এটি কাজটি করার পরে শীর্ষে পুনরায় স্ক্রোল করার কোনও উপায় আছে?

Comments

আপনি যখন এটি $ (উইন্ডো)। লোড () থেকে করেন তখন কী ঘটে?

— এমপিডোনাদিও

@ এমপিডি- দুর্দান্ত ধারণা! ... তবে এটি চেষ্টা করে দেখুন এবং তার পরে স্ক্রোল সামঞ্জস্যটি এখনও ঘটে। যদিও টিপটির জন্য ধন্যবাদ, এটি আসলে আমার অন্য একটি প্রশ্নের সাথে সহায়তা করে: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 4210829/… । আপনি যদি তার উত্তর দিতে চান তবে আমি আপনাকে কিছু উত্সাহ দেব।

— ইয়ারিন

@ ইয়্যারিন দুঃখিত, এর জন্য আপনাকে 9 বছর অপেক্ষা করতে হয়েছিল। আপনি স্ক্রোল করার চেষ্টা করার আগে আপনাকে ইতিহাস.স্ক্রোল পুনঃনির্ধারণ সেট করতে হবে। আমার উত্তর দেখুন।

— রায়লভলেস

Answer 1

বাহ, আমি এই প্রশ্নে 9 বছর দেরি করছি। আপনি এখানে যান:

আপনার কোডটি এই কোডটি যুক্ত করুন।

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

ইতিহাস.স্ক্রোল পুনরুদ্ধার ব্রাউজার সমর্থন:

ক্রোম: সমর্থিত (46 সাল থেকে)

ফায়ারফক্স: সমর্থিত (46 থেকে)

আইই / এজ: সমর্থিত নয় (তবুও ..)

অপেরা: সমর্থিত (৩৩ থেকে)

সাফারি: সমর্থিত

আইই / এজের জন্য যদি আপনি নীচে অটস্ক্রোল পরে শীর্ষে আবার স্ক্রোল করতে চান তবে এটি আমার পক্ষে কাজ করেছে:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

Comments

ধন্যবাদ @ রেলাভলেস - দুর্ভাগ্যক্রমে এটি এমএস ব্রাউজারগুলির দ্বারা সমর্থিত নয় (কারণ অবশ্যই)। Caniuse.com/#feat=mdn-api_history_scrolrest সংরক্ষণ এবং বিকাশকারী।

— ইয়ারিন

@ ইয়্যারিন, ভাল পয়েন্ট আমি আমার পোস্ট আপডেট। এতে আপনার প্রশ্নের উত্তর হলো কি?

— রায়লভলেস

Answer 2

ক্রস ব্রাউজার, খাঁটি জাভাস্ক্রিপ্ট সমাধান:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Comments

যেহেতু আপনি jQuery ব্যবহার করছেন, আপনি এটি চেষ্টা করতে পারেন:$(window).one("scroll",function() { /* the code from my answer here */ });

— নেট দ্য ডার্ক অ্যাবসোল

আমার আইই / ক্রোম / এফএফ ক্রস ব্রাউজারগুলিতে এই কাজটি করতে, আমাকে অবশ্যই ডিয়েট ডার্ক অ্যাবসোল উত্তর এবং ব্যবহারকারীর ১১৩3716১ answer উত্তর (টাইমআউট ব্যবহার করে) একত্রিত করতে হবে।

— পানিনি লুঞ্চার

CentOS 6.7 এফএফ 45.1.0 ব্যবহার করে কাজ করেনি। আমি এটিকে একটি ডকুমেন্টে আবৃত করেছি just নিশ্চিত হওয়ার জন্য প্রস্তুত।

— ব্র্যান্ডন এলিয়ট

কেবলমাত্র আমার টেস্টিং থেকে (ক্রোমের আধুনিক / 2018 সংস্করণ অন্তর্ভুক্ত) থেকে যে সমাধানটি আরও নির্ভরযোগ্যভাবে কাজ করে তা উল্লেখ করতে চাই

— ম্যাটলুমাস

এটি "ব্রাউজারটিকে তার পূর্ববর্তী অবস্থানে স্ক্রোলিং আটকাবে না"। আমার উত্তর দেখুন।

— রায়লভলেস

Answer 3

আপনি এটি প্রায় পেয়েছেন - আপনার চালু করতে scrollTopহবে body, না window:

$(function() {
   $('body').scrollTop(0);
});

সম্পাদনা করুন:

আপনি পৃষ্ঠার শীর্ষে একটি ফাঁকা অ্যাঙ্কর যুক্ত করতে পারেন:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

Comments

আজ এটি চেষ্টা করেছেন এবং এফএফ 16 এ কাজ করেন নি। খাঁটি জেএস ব্যবহার করে, পরিবর্তে এই পৃষ্ঠায় নীচে দেখা যাচ্ছে: ডকুমেন্ট.বি.সক্রলটোপ = ডকুমেন্ট.ডোকমেন্টএলেন্ট.স্ক্রোলটপ = 0;

— Gigi2m02

উপরের কোডটি এফএফ, ক্রোমের মতো আধুনিক ব্রাউজারগুলিতে সঠিকভাবে কাজ করবে তবে এটি আইই 8 তে কাজ করবে না এবং নীচে উভয়ই যুক্ত করার চেষ্টা করুন 'html','body'যেহেতু আধুনিক ব্রাউজারগুলি বডি ভিত্তিক স্ক্রোল করবে তবে আইই 8 এবং নীচে কেবল 'এইচটিএমএল', 'বডি'

— রাজেশ

Answer 4

ব্রাউজারটি তার অতীতের অবস্থানে স্ক্রোলিং বাঁচানোর জন্য বা এটি কাজটি করার পরে শীর্ষে আবার স্ক্রোল করার কোনও উপায় আছে কি?

নিম্নলিখিত jquery সমাধান আমার জন্য কাজ করে:

$(window).unload(function() {
    $('body').scrollTop(0);
});

Comments

হ্যাঁ রিফ্রেশের আগে শীর্ষে স্ক্রোল করুন

— মরগান টি।

সম্পূর্ণ ক্রস ব্রাউজার নয়, তবে এখনও বেশিরভাগের জন্য কাজ করে। যখন অন্য কয়েকটি উত্তরের সাথে মিলিত হয় এটি একটি ভাল সংযোজন

— ব্র্যাড ডেকার

Answer 5

নো-জিকুয়েরি'র জন্য এখানে খাঁটি জাভাস্ক্রিপ্ট অ্যানিমেটেড স্ক্রোল সংস্করণ: ডি

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

এবং তারপর:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

Comments

কুল। যদিও, আমি এর requestAnimationStepপরিবর্তে পছন্দ করব setTimeout। এছাড়াও এটি ওপির প্রশ্নের উত্তর দেয় না।

— কোয়ান্টিন রায়

কৌণিক এটি প্রয়োগ। একটি যাদুমন্ত্র মত কাজ করে. ধন্যবাদ

— আহমদ

Answer 6

হালনাগাদ

স্ক্রোল প্রভাব সহ পৃষ্ঠার শীর্ষে যাওয়া জাভাস্ক্রিপ্টে এখন আরও কিছুটা সহজ:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

সতর্ক করা

আমরা আমাদের অতি সাম্প্রতিক প্রকল্পগুলিতে এটি ব্যবহার করে আসছি, তবে আমি আমার উত্তরটি আপডেট করার সময় এখনই মজিলা ডকটি পরীক্ষা করেছি এবং আমার বিশ্বাস এটি আপডেট হয়েছে। ঠিক এখন পদ্ধতি window.scroll(x-coord, y-coord)এবং উল্লেখ বা যে ব্যবহার উদাহরণ প্রদর্শন করা হয় না objectপ্যারামিটার যেখানে আপনি নির্ধারণ করতে পারেন behaviorথেকে smooth। আমি কেবল কোডটি চেষ্টা করেছি এবং এটি এখনও ক্রোম এবং ফায়ারফক্সে কাজ করে এবং অবজেক্টের প্যারামিটারটি এখনও অনুমানের মধ্যে রয়েছে ।

সুতরাং এটি সাবধানতার সাথে ব্যবহার করুন বা আপনি এই পলিফিল ব্যবহার করতে পারেন । শীর্ষে স্ক্রলিং ছাড়াও, এই polyfill এছাড়াও অন্যান্য পদ্ধতি পরিচালনা: window.scrollBy, element.scrollIntoView, ইত্যাদি

---

পুরানো উত্তর

এটি আমাদের ভ্যানিলা javascriptবাস্তবায়ন। এটির সহজ সরল প্রভাব রয়েছে যাতে টপ টপ বোতামটি ক্লিক করার পরে ব্যবহারকারী হতবাক না হয়ে যায় ।

এটি খুব ছোট এবং মাইনযুক্ত হয়ে গেলে আরও ছোট হয়। দেবগণ jquery পদ্ধতির বিকল্প খুঁজছেন তবে একই ফলাফল চান এটি চেষ্টা করতে পারে।

জাতীয়

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

এইচটিএমএল

<button id="to-top">To Top</button>

চিয়ার্স!

Answer 7

এটি আমার পক্ষে কাজ করে:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

ব্রাউজারটিকে স্ক্রোল করার সুযোগ দেওয়ার জন্য এর setTimeoutঅভ্যন্তরে একটি সংক্ষিপ্ত ব্যবহার onloadকরে।

Comments

আমার আইই / ক্রোম / এফএফ ক্রস ব্রাউজারগুলিতে এই কাজটি করতে, আমাকে অবশ্যই ডিয়েট ডার্ক অ্যাবসোল উত্তর এবং ব্যবহারকারীর ১১৩3716১ answer উত্তর (টাইমআউট ব্যবহার করে) একত্রিত করতে হবে।

— পানিনি লুঞ্চার

@ পানিনি: আপনার পরামর্শটি আমার জন্য ক্রোম / এফএফ-তে কাজ করে, তবে আইই ১১ নয়।

— EML

Answer 8

আপনি jQuery সঙ্গে ব্যবহার করতে পারেন

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

Comments

এটি মূলত আমি এফএফ 45.1.0 ব্যবহার করে CentOS 6.7 এ কাজ করতে পেলাম। আমার সামান্য ভিন্ন সংস্করণ (উইন্ডো লোড ফাংশনটিতে আবৃত) হ'ল: $ ("এইচটিএমএল, বডি") an

— ব্র্যান্ডন ইলিয়ট

Answer 9

নিম্নলিখিত ফাংশন ব্যবহার করুন

window.scrollTo(xpos, ypos)

এখানে এক্সপোস প্রয়োজনীয়। এক্স-অক্ষ (অনুভূমিক) বরাবর, পিক্সেলগুলিতে স্ক্রোল করার স্থানাঙ্ক

ypos এছাড়াও প্রয়োজনীয়। Y- অক্ষ (উল্লম্ব) বরাবর, পিক্সেলগুলিতে স্ক্রোল করার স্থানাঙ্ক

Answer 10

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

এটা ব্যবহার কর

Comments

নিস! অ্যানিমেশন দিয়ে দুর্দান্ত কাজ করে!

— সাকথিভেল

Answer 11

নিম্নলিখিত কোডগুলি ফায়ারফক্স, ক্রোম এবং সাফারিতে কাজ করে তবে আমি ইন্টারনেট এক্সপ্লোরারে এটি পরীক্ষা করতে পারিনি। কেউ কি এটি পরীক্ষা করতে পারে, এবং তারপরে আমার উত্তর সম্পাদনা করতে বা এটিতে মন্তব্য করতে পারে?

$(document).scrollTop(0);

Answer 12

আমার খাঁটি (অ্যানিমেটেড) জাভাস্ক্রিপ্ট সমাধান:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

ব্যাখ্যা:

window.scrollY উইন্ডো দ্বারা স্ক্রোল করা শীর্ষ থেকে পিক্সেলের পরিমাণের ব্রাউজার দ্বারা পরিচালিত একটি পরিবর্তনীয়।

window.scrollTo(x,y) এটি এমন একটি ফাংশন যা উইন্ডোটি এক্স অক্ষ এবং y অক্ষের উপর নির্দিষ্ট পরিমাণ পিক্সেল স্ক্রোল করে।

সুতরাং, window.scrollTo(0,window.scrollY-20)পৃষ্ঠাটি 20 পিক্সেল শীর্ষে সরিয়ে নিয়েছে।

setTimeout10 মিলিসেকেন্ডে আবার ফাংশন কল যাতে আমরা তারপর এটি অন্য 20 পিক্সেল (অ্যানিমেটেড), এবং স্থানান্তর করতে পারেন ifবিবৃতি চেক যদি আমরা এখনও স্ক্রল করতে হবে।

Answer 13

আপনি যেমন এইচটিএমএল ফাইলের একেবারে শুরুতে কিছু রেফারেন্স উপাদান ব্যবহার করেন না, যেমন

<div id="top"></div>

এবং তারপরে পৃষ্ঠাটি লোড হয়ে গেলে কেবল করুন

$(document).ready(function(){

    top.location.href = '#top';

});

ব্রাউজারটি যদি এই ক্রিয়াকলাপটি ছড়িয়ে পড়ার পরে স্ক্রল করে তবে আপনি কেবল তাই করুন

$(window).load(function(){

    top.location.href = '#top';

});

Comments

এটি আমার পক্ষে কাজ করেছে, তবে এটি ইউআরএলে # শীর্ষস্থানীয়কে যুক্ত করেছে, আপনি কীভাবে আমাকে তা এড়াতে পারেন তা দয়া করে বলতে পারেন তবে একই সাথে কার্যকারিতা নিয়ে আপস করছেন না

— আব্বাস

Answer 14

শীর্ষে ক্রস ব্রাউজার:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

Id = div_id সহ কোনও উপাদানটিতে ক্রস ব্রাউজার স্ক্রোল করুন:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

Answer 15

আপনার সম্পাদিত প্রশ্নটির উত্তর দেওয়ার জন্য, আপনি onscrollহ্যান্ডলারটি এভাবে নথিভুক্ত করতে পারেন:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

এটি এটিকে তৈরি করবে যাতে স্ক্রোলিংয়ের প্রথম প্রচেষ্টা (যা সম্ভবত ব্রাউজার দ্বারা করা স্বয়ংক্রিয়ভাবে সম্ভবত) কার্যকরভাবে বাতিল হয়ে যায়।

Comments

চমৎকার সমাধান- আমি একবার চেষ্টা করে

— দেখব

Answer 16

যদি আপনি কুইর্কস মোডে থাকেন (ধন্যবাদ @ নিট দ্য ডার্ক অ্যাবসোল):

document.body.scrollTop = document.documentElement.scrollTop = 0;

আপনি যদি কড়া মোডে থাকেন:

document.documentElement.scrollTop = 0;

এখানে jQuery প্রয়োজন নেই।

Answer 17

এটি কাজ করছে:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

Answer 18

আমার ক্ষেত্রে বডি কাজ করে নি:

$('body').scrollTop(0);

তবে এইচটিএমএল কাজ করেছে:

$('html').scrollTop(0);

Comments

'html','body'আধুনিক ব্রাউজার উভয়ই এফএফ হিসাবে যুক্ত করুন, ক্রোম শরীরের উপর ভিত্তি করে স্ক্রোল করবে তবে আইই 8 এবং নীচে কেবল স্ক্রল করবে'html','body'

— রাজেশ

Answer 19

এই দুইয়ের সংমিশ্রণ আমাকে সাহায্য করেছিল। আমার কাছে সিডেনাভ ছিল যেহেতু স্ক্রলিং ছিল না, অন্য উত্তরগুলির কোনওটিই আমাকে সাহায্য করেনি।

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

    document.body.scrollTop = document.documentElement.scrollTop = 0;

}, 15);

Answer 20

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

Answer 21

অ্যানিমেশন ছাড়াই, কেবল scroll(0, 0)(ভ্যানিলা জেএস)

Answer 22

যদি কেউ সিডেনাভ দিয়ে কৌনিক এবং উপাদান ডিজাইন ব্যবহার করে থাকে। এটি আপনাকে পৃষ্ঠার শীর্ষে প্রেরণ করবে:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Answer 23

হ্যাশটির কাজটি করা উচিত See আপনার যদি একটি শিরোনাম থাকে তবে আপনি ব্যবহার করতে পারেন

window.location.href = "#headerid";

অন্যথায়, # একা কাজ করবে

window.location.href = "#";

এবং এটি ইউআরএল লিখিত হওয়ার সাথে সাথে আপনি রিফ্রেশ করলে তা থেকে যাবে।

আসলে, আপনার ইভেন্টটির জাভা স্ক্রিপ্টের দরকার নেই যদি আপনি এটি অনক্লিক ইভেন্টে করতে চান তবে আপনার এলিমেন্টটিকে আপনার চারপাশে কেবল একটি লিঙ্ক স্থাপন করা উচিত এবং এটি href হিসাবে দেওয়া উচিত।

Comments

বিটিডাব্লু, উইন্ডো.লোকেশন গাছের অংশ নয় তাই এখনই লোডের জন্য অপেক্ষা করার জন্য ব্যবহার রয়েছে।

— xavierm02

Answer 24

প্রথমে আপনি যেখানে যেতে চান সেখানে একটি ফাঁকা অ্যাঙ্কর ট্যাগ যুক্ত করুন

<a href="#topAnchor"></a> 

এখন শিরোনাম বিভাগে একটি ফাংশন যুক্ত করুন

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

অবশেষে বডি ট্যাগে একটি লোড ইভেন্ট যুক্ত করুন

<body onload="GoToTop()">

Answer 25

একটি জেনেরিক সংস্করণ যা কোনও এক্স এবং ওয়াইয়ের মানের জন্য কাজ করে এবং উইন্ডো.স্রোকল টু এপিআইয়ের মতো, কেবল স্ক্রোলডোরেশন যোগ করার সাথে।

* উইন্ডোটির সাথে মিলে একটি সাধারণ সংস্করণ browser

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

Answer 26

আমার মনে আছে এটি পোস্ট করা অন্য কোথাও দেখেছি (আমি কোথায় পাইনি) তবে এটি সত্যিই ভালভাবে কাজ করে:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

এটি অদ্ভুত তবে জাভাস্ক্রিপ্টের স্ট্যাক সারিতে যেভাবে কাজ করা হয়েছে তার ভিত্তিতে এটি কাজ করে of পূর্ণ ব্যাখ্যা পাওয়া যায় এখানে জিরো বিলম্ব বিভাগে।

মূল ধারণাটি হ'ল setTimeoutএটির জন্য সময়টি নির্ধারিত সময়ের পরিমাণটি নির্দিষ্ট করে না তবে এটি ন্যূনতম সময়ের জন্য অপেক্ষা করবে। সুতরাং আপনি যখন এটি 0 মিমি অপেক্ষা করতে বলবেন, ব্রাউজারটি অন্যান্য সারিবদ্ধ সমস্ত প্রক্রিয়া চালায় (যেমন উইন্ডোটি আপনি যেখানে ছিলেন সেখানে স্ক্রোল করার মতো) এবং তারপরে কলব্যাকটি কার্যকর করে।

Answer 27

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>

Comments

স্ট্যাকওভারফ্লোতে স্বাগতম। আপনি যে কোড সরবরাহ করেছেন সেগুলি ছাড়াও কেন এবং কীভাবে এটি সমস্যার সমাধান করে সে সম্পর্কে কিছু ব্যাখ্যা দেওয়ার চেষ্টা করুন।

— jtate