ताज़ा करने पर स्वचालित ब्राउज़र स्क्रॉल रोकें

Question

यदि आप किसी पृष्ठ पर जाते हैं और चारों ओर स्क्रॉल करते हैं, तो पृष्ठ ताज़ा करें उस स्थान पर ताज़ा हो जाएगा जहाँ आपने इसे छोड़ा था। यह बहुत अच्छा है, हालांकि यह उन पृष्ठों पर भी होता है जहां यूआरएल में एक लंगर स्थान है। एक उदाहरण यह होगा कि यदि आपने एक लिंक पर क्लिक किया http://example.com/post/244#comment5और पृष्ठ को देखने के बाद ताज़ा किया तो आप लंगर में नहीं होंगे और पृष्ठ चारों ओर से घूमता है। क्या जावास्क्रिप्ट के साथ इसे रोकने का कोई तरीका है? ताकि कोई बात नहीं-आप हमेशा एंकर पर नेविगेट करें।

Comments

एक jQuery समाधान ठीक है या आप सादे js चाहते हैं?

— म्रतशर्मन

Answer 1

ब्राउज़र व्यवहार में परिवर्तन के कारण इस समाधान की अनुशंसा नहीं की जाती है। अन्य उत्तर देखें।

मूल रूप से, अगर एक लंगर का उपयोग किया जाता है, तो हम विंडोज़ स्क्रॉल इवेंट से जुड़ जाते हैं। यह विचार कि पहली स्क्रॉल घटना ब्राउज़र द्वारा किए गए स्वचालित पुनरावर्तन से संबंधित है। जब ऐसा होता है तो हम अपने स्वयं के स्थान पर करते हैं और फिर बाध्य घटना को हटा देते हैं। यह बाद के पेज स्क्रॉल को सिस्टम को बोर करने से रोकता है।

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

Comments

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

— मृत्शमन

Booyah! यह देर रात एक मजेदार समस्या थी। जब मैं अपने डेस्क पर सो रहा होता हूं तो मैं अपने बॉस से कहता हूं कि यह आपकी गलती है। मैंने सिर्फ रिटर्न स्टेटमेंट निकालने के लिए एक त्वरित बदलाव किया। इसे मैंने स्क्रॉल इवेंट के लिए जोड़े गए unbinding के साथ हस्तक्षेप किया।

— म्रतशर्मन

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

— थॉमसरेजी

यदि आपके पास पृष्ठ लोड के बाद लोड होने वाली सामग्री है तो यह काम नहीं करेगा; Ex: 2 div होने कि अजाक्स से भरा जाएगा बैनर के साथ

— देउबल

@FlashThunder - क्या आप "काम नहीं करता है" को परिभाषित कर सकते हैं? कंसोल संदेश पोस्ट करें?

— मृत्शमान

Answer 2

क्रोम पर, भले ही आप स्क्रॉलटॉप को 0 पर मजबूर करते हैं, यह पहली स्क्रॉल घटना के बाद बाद में कूद जाएगा।

आपको इस पर स्क्रॉल बांधना चाहिए:

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

इसलिए ब्राउज़र को यह विश्वास करने के लिए धोखा दिया जाता है कि यह ताज़ा होने से पहले शुरुआत में था।

Comments

यदि आप स्क्रॉलिंग के साथ गड़बड़ नहीं करना चाहते हैं तो स्वीकृत उत्तर की तुलना में अधिक उपयोगी है।

— दान अब्रामोव

यह Chrome 33 में काम नहीं कर रहा है। मेरा मतलब है कि यह नया पेज लोड करने से पहले शीर्ष पर स्क्रॉल करता है। हालाँकि ब्राउज़र अभी भी किसी न किसी तरह से पिछली स्क्रॉल स्थिति को याद रखता है और उस स्थिति में एक ही ऑटोस्कोप करता है।

— हरलन डोबरेव

क्रोम 36, फ़ायरफ़ॉक्स 30 और IE 11 पर परीक्षण किया गया।

— फिजिक्स

गैर- jQuery कार्यान्वयन के लिए: window.onbeforeunload = function(){ window.scrollTo(0,0); }

— ProfNandaa

आपने 'अनलोड' के बजाय 'पहले से लोड' घटना को क्यों चुना? मेरे परीक्षण से पता चलता है कि पिछले एक पृष्ठ से पहले शीर्ष पर कूदने से बचने की अनुमति है वास्तव में ब्राउज़र द्वारा अनलोड किया जाता है।

— हांग्जो ज़ोनोव

Answer 3

स्वचालित स्क्रॉल बहाली को अक्षम करने के लिए बस इस टैग को हेड सेक्शन में जोड़ें।

<script>history.scrollRestoration = "manual"</script>

यह IE द्वारा समर्थित नहीं है। ब्राउज़र संगतता।

Comments

यह सबसे अच्छा जवाब होगा यदि यह IE / Edge में उपलब्ध था। आप इसे यहां लागू करने के लिए वोट कर सकते हैं: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— Chewy

यह 2019 में वास्तव में एक सही उत्तर होना चाहिए। कोई भी अन्य तरीका 100% काम नहीं कर रहा है।

— लिम्बो

पुष्टि कर सकते हैं यह सबसे अच्छा समाधान है। यहां अन्य समाधान मोबाइल सफारी पर काम नहीं करते हैं और जानलेवा हो सकते हैं। यह पूरी तरह से काम करता है।

— user3330820

Answer 4

अंत में विफलताओं की संख्या के बाद मैं चाल करने में कामयाब रहा। azo सही है यहाँ का उपयोग कर के रूप beforeunloadमें पृष्ठ कूद करने के लिए शीर्ष जब एक उपयोगकर्ता पृष्ठ पुनः लोड या एक लिंक पर क्लिक करता है। तो unloadऐसा करने का स्पष्ट तरीका है।

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

जावास्क्रिप्ट तरीका (धन्यवाद प्रोन्नंदा ):

window.onunload = function(){ window.scrollTo(0,0); }

EDIT: 16/07/2015

जम्प समस्या अभी भी फ़ायरफ़ॉक्स के साथ unloadईवेंट के साथ है ।

Comments

यह समाधान समाधान से बहुत बेहतर है beforeunloadक्योंकि यह पृष्ठ के शीर्ष पर पुनः लोड और एंकर क्लिक पर कूदने से रोकता है।

— ब्रैडगर्न्स

@BradGreens आधुनिक क्रोम के साथ, उपयोगकर्ता द्वारा अन्य टैब पर स्विच करने पर, ऑनऑनलोड घटना भी चालू हो जाती है, जो अप्रत्याशित है। onbeforeunload अभी भी मान्य वर्कअराउंड है।

— तेल्विन गुयेन

@TelvinNguyen क्या आप इस पर कोई संसाधन दे सकते हैं? मैंने इसे गूगल क्रोम 72 पर परीक्षण किया और अभी भी मेरे लिए ठीक काम कर रहा है।

— जनक डोंबावेला

@JanakaDombawela मैंने क्या कहा: नए टैब को शिफ्ट करना जो समस्या का कारण होगा गलत है। हालाँकि, आप देख सकते हैं कि घटना इस उदाहरण पर ठीक से चालू नहीं है, यहां तक ​​कि jQuery 1.9.1 बनाम jQuery 1.8.3 के साथ भी। onunload अविश्वसनीय है। jsfiddle.net/6s4jhdug/3 (1.8.3) jsfiddle.net/frt45ue9 (1.9.1)

— तेल्विन गुयेन

Answer 5

यहाँ एक और अधिक सामान्य दृष्टिकोण है। ब्राउज़र को स्क्रॉल करने से रोकने की कोशिश करने के बजाय (या ऊपर की ओर कूदते हुए जैसा लगेगा) मैं सिर्फ पृष्ठ पर पिछली स्थिति को पुनर्स्थापित करता हूं। यानी मैं लोकलस्टोरेज में पेज के वर्तमान y- ऑफसेट को रिकॉर्ड कर रहा हूं और पेज लोड होने के बाद इस स्थिति में स्क्रॉल करता हूं।

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

Answer 6

आप अंत में एक # डाल सकते हैं ताकि पृष्ठ शीर्ष पर लोड हो जाए।

सभी ब्राउज़रों, मोबाइल और डेस्कटॉप पर काम करता है, क्योंकि यह बहुत सरल है।

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// यह पेज को आखिर में # के साथ लोड करता है।

Comments

अगर मैं सीधे अपने सर्वर पर यह कोशिश करता हूं, तो यह जादू की तरह काम करता है। लेकिन, मेरी सेमी मुझे मार्क-अप त्रुटि दे रही है। मैं समझ नहीं पा रहा हूं कि यह क्या है।

— ऐलिस

यदि आप jQuery के लिए $ $ का उपयोग कर रहे हैं

— हर्ज़लिंग

Answer 7

यह मेरे लिए काम करता है।

    //Reset scroll top

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });

Answer 8

आपको इसका सक्षम होना चाहिए।

Onload, window.location.hashमान है कि जाँच करें । यदि ऐसा होता है, तो उस तत्व को आइडी के साथ पकड़ो जो हैश मान से मेल खाता है। तत्व की स्थिति का पता लगाएं (ऑफसेट / ऑफसेटलेफ्ट पर पुनरावर्ती कॉल) और फिर उन मानों को window.scrollTo(x, y)विधि में पास करें।

यह पृष्ठ को वांछित तत्व तक स्क्रॉल करना चाहिए।

Comments

यह ब्राउज़र को ऑटो स्क्रॉल करने से नहीं रोक रहा है। यही सवाल है।

— हरलन डोबरेव