जावास्क्रिप्ट / jQuery के साथ पृष्ठ के शीर्ष पर स्क्रॉल कैसे करें?

Question

क्या जावास्क्रिप्ट / jQuery के साथ ब्राउज़र स्क्रॉलिंग को नियंत्रित करने का कोई तरीका है?

जब मैं अपने पृष्ठ को आधा नीचे स्क्रॉल करता हूं, तो फिर से लोड करें, मैं चाहता हूं कि पृष्ठ शीर्ष पर पैक जाए, लेकिन इसके बजाय अंतिम स्क्रॉल स्थिति खोजने का प्रयास करता है। तो मैंने ऐसा किया:

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

लेकिन किस्मत नहीं।

संपादित करें :

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

तो अनुवर्ती है, क्या ब्राउज़र को अपनी पिछली स्थिति में स्क्रॉल करने का एक तरीका है, या फिर शीर्ष पर फिर से स्क्रॉल करने के लिए यह अपनी बात करता है?

Comments

जब आप इसे $ (विंडो) .लोड () से करते हैं तो क्या होता है?

— mpdonadio

@ एमपीडी- उत्कृष्ट विचार! ... लेकिन अभी यह कोशिश की और स्क्रॉल समायोजन अभी भी उसके बाद होता है। हालांकि टिप के लिए धन्यवाद, यह वास्तव में मेरा एक और सवाल के साथ मदद करता है: stackoverflow.com/questions/4210829/… । यदि आप उत्तर देना चाहते हैं कि मैं आपको कुछ उतार दूंगा।

— यारिन

@ यारिन सॉरी आपको इसके लिए 9 साल इंतजार करना पड़ा। स्क्रॉल करने का प्रयास करने से पहले आपको history.scrollRestoration सेट करना होगा। मेरा जवाब देखिए।

— रेवेल्वेस ने

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

history.scrollRestoration ब्राउज़र समर्थन:

क्रोम: समर्थित (46 के बाद से)

फ़ायरफ़ॉक्स: समर्थित (46 के बाद से)

आईई / एज: समर्थित नहीं (फिर भी ..)

ओपेरा: समर्थित (33 के बाद से)

सफ़ारी: समर्थित

IE / Edge के लिए यदि आप शीर्ष पर फिर से स्क्रॉल करना चाहते हैं, तो यह नीचे आटोस्कॉल करता है तो यह मेरे लिए काम करता है:

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

धन्यवाद @RayLoveless - दुर्भाग्य से यह MS ब्राउज़रों द्वारा समर्थित नहीं है (निश्चित रूप से)। देख caniuse.com/#feat=mdn-api_history_scrollrestoration और developer.mozilla.org/de/docs/Web/API/...

— Yarin

@ यारिन, अच्छी बात है। मैंने अपनी पोस्ट अपडेट की। क्या इससे आपके प्रश्न का उत्तर मिलता है?

— रेवेल्वेस

Answer 2

क्रॉस-ब्राउज़र, शुद्ध जावास्क्रिप्ट समाधान:

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

Comments

चूँकि आप jQuery का उपयोग कर रहे हैं, आप यह कोशिश कर सकते हैं:$(window).one("scroll",function() { /* the code from my answer here */ });

— नीट द डार्क एबसोल

मेरे IE / Chrome / FF क्रॉस-ब्राउज़र पर यह काम करने के लिए, मुझे नीट डार्क एबसोल उत्तर और user113716 उत्तर (टाइमआउट का उपयोग करके) को संयोजित करना होगा।

— पाणिनी लंचर

FF 45.1.0 का उपयोग कर CentOS 6.7 पर काम नहीं किया। मैंने इसे एक दस्तावेज में लपेटा था। पहले से ही सुनिश्चित होने के लिए।

— ब्रैंडन इलियट

बस यह

— बताना

यह "ब्राउज़र को उसके पिछले स्थान पर स्क्रॉल करने से रोकता नहीं है"। मेरा जवाब देखिए।

— 23

Answer 3

आप लगभग समझ में आ गया है - आप स्थापित करने की आवश्यकता scrollTopपर body, नहींwindow :

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

संपादित करें:

हो सकता है कि आप पृष्ठ के शीर्ष पर एक रिक्त लंगर जोड़ सकते हैं:

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

Comments

आज यह कोशिश की और FF16 में काम नहीं किया। शुद्ध JS का उपयोग करते हुए, इस पृष्ठ पर निम्न को देखा गया: इसके बजाय। document.body.scrollTop = document.documentElement.scrollTop = 0;

— गिगी

उपरोक्त कोड एफएफ, क्रोम जैसे आधुनिक ब्राउज़रों में ठीक से काम करेगा लेकिन यह IE8 में काम नहीं करेगा और नीचे दोनों जोड़ने की कोशिश 'html','body'करेंगे क्योंकि आधुनिक ब्राउज़र शरीर पर आधारित स्क्रॉल करेंगे लेकिन IE8 और नीचे केवल 'html', 'body' के

— राजेश

Answer 4

क्या ब्राउज़र को अपने पिछले स्थान पर स्क्रॉल करने का तरीका है, या फिर शीर्ष पर स्क्रॉल करने के लिए यह अपनी बात करता है?

निम्नलिखित jquery समाधान मेरे लिए काम करता है:

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

Comments

ताज़ा करने से पहले ऊपर स्क्रॉल करें

— मॉर्गन टी।

पूरी तरह से ब्राउज़र को पार नहीं करता है, लेकिन फिर भी अधिकांश के लिए काम करता है। जब कुछ अन्य उत्तरों के साथ युग्मित किया जाता है तो यह एक अच्छा जोड़ होता है

— ब्रैड डेकर

Answer 5

यहाँ कोई jQuery'ers के लिए एक शुद्ध जावास्क्रिप्ट एनिमेटेड स्क्रॉल संस्करण है: डी

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, आदि

---

पुराने ANSWER

यह हमारा वनीला 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

मेरे IE / Chrome / FF क्रॉस-ब्राउज़र पर यह काम करने के लिए, मुझे नीट डार्क एबसोल उत्तर और user113716 उत्तर (टाइमआउट का उपयोग करके) को संयोजित करना होगा।

— पाणिनी लंचर

@Pini: आपका सुझाव मेरे लिए Chrome / FF पर काम करता है, लेकिन IE11 पर नहीं।

— ईएमएल

Answer 8

आप jQuery के साथ उपयोग कर सकते हैं

jQuery(window).load(function(){

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

});

Comments

यह मूल रूप से मैं क्या अंतिम रूप से FOS 45.1.0 का उपयोग कर CentOS 6.7 पर काम करने के लिए मिला। मेरा थोड़ा अलग संस्करण (एक विंडो लोड फ़ंक्शन में लिपटे) है: $ ("html, बॉडी")। चेतन ({स्क्रॉलटॉप: 0}, 1);

— ब्रैंडन इलियट

Answer 9

निम्न फ़ंक्शन का उपयोग करें

window.scrollTo(xpos, ypos)

यहाँ xpos आवश्यक है। पिक्सेल में x- अक्ष (क्षैतिज) के साथ स्क्रॉल करने के लिए समन्वय

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) एक ऐसा कार्य है जो विंडो को x अक्ष पर और y अक्ष पर पिक्सेल की एक विशिष्ट राशि को स्क्रॉल करता है।

इस प्रकार, window.scrollTo(0,window.scrollY-20) पृष्ठ 20 पिक्सेल को ऊपर की ओर ले जाता है।

setTimeout10 मिलीसेकंड में फिर से फ़ंक्शन को कॉल ताकि हम तो यह एक और 20 पिक्सल (एनिमेटेड), और स्थानांतरित कर सकते हैं ifबयान जांच करता है कि हम अभी भी पुस्तक की जरूरत है।

Answer 13

आप अपनी html फ़ाइल की शुरुआत में सिर्फ कुछ संदर्भ तत्व का उपयोग क्यों नहीं करते हैं, जैसे

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

और फिर, जब पृष्ठ लोड होता है, बस करते हैं

$(document).ready(function(){

    top.location.href = '#top';

});

यदि इस फ़ंक्शन के बाद ब्राउज़र स्क्रॉल करता है, तो आप बस करते हैं

$(window).load(function(){

    top.location.href = '#top';

});

Comments

यह मेरे लिए काम करता है, लेकिन यह यूआरएल में #top जोड़ता है, क्या आप मुझे बता सकते हैं कि मैं इससे कैसे बच सकता हूं, लेकिन साथ ही, कार्यक्षमता के साथ समझौता नहीं करना चाहिए

— अब्बास

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

यदि आप विचित्र मोड में हैं (साभार @Niet the Dark Absol):

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 ने काम किया:

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

Comments

दोनों 'html','body'को आधुनिक ब्राउज़रों एफएफ के रूप में जोड़ें , क्रोम शरीर के आधार पर स्क्रॉल करेगा लेकिन IE8 और नीचे केवल स्क्रॉल करेगा'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

हैश को काम करना चाहिए। यदि आपके पास एक हेडर है, तो आप उपयोग कर सकते हैं

window.location.href = "#headerid";

अन्यथा, # अकेले काम करेगा

window.location.href = "#";

और जैसे ही यह url में लिखा जाता है, यह ताज़ा रहेगा।

वास्तव में, आपको इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं है कि यदि आप इसे ऑनक्लिक ईवेंट पर करना चाहते हैं, तो आपको बस एक लिंक दिया जाना चाहिए जो आपको घेरे हुए है और इसे # रूप में href दें।

Comments

Btw, window.location पेड़ का हिस्सा नहीं है इसलिए अब ऑनलोड का इंतजार करने के लिए उपयोग किया जाता है।

— 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

एक सामान्य संस्करण जो किसी भी X और Y मान के लिए काम करता है, और window.scrollTo api जैसा ही है, केवल स्क्रॉलड्रेशन के अलावा।

* Window.scrollTo ब्राउज़र api ** से मेल खाने वाला एक सामान्य संस्करण

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

यह अजीब है, लेकिन जिस तरह से यह काम करता है वह जावास्क्रिप्ट के स्टैक कतार के काम करने के तरीके से आधारित है। पूर्ण विवरण यहाँ शून्य विलंब अनुभाग में पाया जाता है ।

मूल विचार यह है कि जिस समय setTimeoutकी प्रतीक्षा की जाएगी, वह वास्तव में निर्धारित समय के लिए निर्दिष्ट नहीं करता है, लेकिन न्यूनतम समय की प्रतीक्षा करेगा। इसलिए जब आप इसे 0ms प्रतीक्षा करने के लिए कहते हैं, तो ब्राउज़र अन्य सभी कतारबद्ध प्रक्रियाओं को चलाता है (जैसे कि विंडो जहां आप पिछले थे) स्क्रॉल करना और फिर कॉलबैक निष्पादित करता है।

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

Stackoverflow में आपका स्वागत है। आपके द्वारा प्रदान किए गए कोड के अलावा, यह क्यों और कैसे इस समस्या को हल करता है पर कुछ स्पष्टीकरण देने का प्रयास करें।

— jtate