पृष्ठ लोड करते समय लंगर "कूद" को कैसे अक्षम करें?


110

मुझे लगता है कि यह संभव नहीं हो सकता है, जितना हो सके उतना अच्छा करने की कोशिश करूंगा और समझाऊंगा। मेरे पास एक पृष्ठ है जिसमें टैब (jquery संचालित) है, जिसे निम्नलिखित द्वारा नियंत्रित किया जाता है:

मैं इस कोड का उपयोग कर रहा हूं, जैसा कि पिछले प्रश्न के किसी अन्य उपयोगकर्ता द्वारा प्रदान किया गया है।

<script type="text/javascript">
    $(function() {

     $('html, body').animate({scrollTop:0}); // this is my "fix"

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;
     tabContent.not(hash).hide();
        if(hash=="") {
      $('#tab1').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href");

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

जब मैं सीधे "टैब" पृष्ठ पर जाता हूं तो यह कोड बहुत अच्छा काम करता है।

हालाँकि, मुझे अन्य पेजों से अनौपचारिक टैब से लिंक करने की आवश्यकता है - इसलिए ऐसा करने के लिए, कोड को window.location.hashतब प्राप्त होता है जब एप्प्रोटेक्ट टैब दिखाता है।

पेज "वापस झूठे" के कारण लंगर के लिए "कूद" नहीं करता है।

यह ईवेंट केवल एक क्लिक ईवेंट पर चालू होता है। इसलिए, अगर मैं किसी अन्य पृष्ठ से अपने "टैब" पर जाता हूं, तो "कूद" प्रभाव शुरू हो जाता है। इससे निपटने के लिए मैं स्वचालित रूप से पृष्ठ के शीर्ष पर स्क्रॉल करता हूं, लेकिन मैं ऐसा नहीं करूंगा।

क्या पेज लोड होने पर लंगर को "झूठे" अनुकरण करने का कोई तरीका है, लंगर "कूद" को रोकने से रोकना।

आशा है कि यह पर्याप्त स्पष्ट है।

धन्यवाद

जवाबों:


143

क्या आपका फिक्स काम नहीं करता है? मुझे यकीन नहीं है कि अगर मैं प्रश्न को सही ढंग से समझता हूं - क्या आपके पास एक डेमो पृष्ठ है? तुम कोशिश कर सकते हो:

if (location.hash) {
  setTimeout(function() {

    window.scrollTo(0, 0);
  }, 1);
}

संपादित करें: विंडोज पर फ़ायरफ़ॉक्स, IE और क्रोम में परीक्षण और काम करता है।
2 संपादित करें: ब्लॉक के setTimeout()अंदर जाएं if, @vsync को प्रॉपर करें।


2
नायक! हां, मेरे "फिक्स" ने काम किया, लेकिन पेज "स्क्रॉल" करेगा (जैसा कि मेरे कोड ने इसे बताया था), और मैं बल्कि यह स्क्रॉल नहीं किया था। आपका कोड पूरी तरह से काम करता है। मैं स्क्रॉल में नहीं देखा था - क्या फ़ंक्शन भी आवश्यक है? यह सिर्फ window.scrollTo (0, 0) के साथ ठीक काम करता प्रतीत होता है;
रॉस

3
मैंने फ़ायरफ़ॉक्स में इसे बिना किसी खाली पृष्ठ पर आज़माया setTimeoutऔर यह हमेशा काम नहीं किया। अगर यह jQuery के $(function() {वैसे भी है, तो आपको शायद इसकी आवश्यकता नहीं है। आपको वास्तव में इसकी आवश्यकता नहीं है location.hash, लेकिन यह बहुत अच्छा है कि इसे ब्राउज़र में छोड़ना कुछ भी नहीं करना पड़ सकता है। आपको यह भी याद दिलाता है कि स्क्रोल्टो क्या है!
dave1010

2
आज मुझे भी यही समस्या थी। मुझे वास्तव में अपने नेवी लिंक से हैश (टैब नाम / href मान के समान) जोड़ना था। मैंने अपने टैब में 1-चार प्रत्यय जोड़ना समाप्त कर दिया, और फिर उन्हें विंडो में तुलना करते समय 1 char (str.slice (0, -1) द्वारा मानों का प्रतिस्थापन किया। इस तरह से हैश अलग होते हैं और कोई जंपिंग नहीं होती है। ।
डेवलपर 10

1
ifबाहर होना चाहिए, नहीं अंदर। इसके अलावा, अंतराल के लिए न्यूनतम 10 के बारे में है, इसलिए 0 या 1 वही है। 10. ब्राउज़र पर निर्भर करता है।
विस्कॉन्सिन

2
यह ब्राउज़र को हैशटैग में जाने से नहीं रोकता है, आपको 'जंपसनेस' को रोकने के लिए एक खाली हैशटैग लगाना होगा, मेरा जवाब यहां देखें stackoverflow.com/a/29823913/826194
लार्जन

43

मेरा जवाब यहां देखें: Stackoverflow Answer

चाल सिर्फ हैशटैग ASAP को हटाने और अपने स्वयं के उपयोग के लिए इसके मूल्य को संग्रहीत करने के लिए है:

यह महत्वपूर्ण है कि आप कोड के उस हिस्से को $ () या $ (विंडो) .load () कार्यों में न डालें क्योंकि यह बहुत देर हो जाएगी और ब्राउज़र पहले ही टैग में चला गया है।

// store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on('load', function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});

1
मैं एफएफ के साथ एक बग में भाग गया था, जहां मैं वास्तव में लंबी सूची के साथ एक div पर अधिकतम ऊंचाई ओवरफ्लो-वाई का उपयोग कर रहा था, FFwould नीचे स्क्रॉल करें जहां छिपा नोड डोम में होगा। यह केवल वास्तविक कोड (टिप्पणी नहीं) की शीर्ष तीन पंक्तियों का उपयोग करता था और इसने फायरफॉक्स के साथ मेरे मुद्दे को ठीक किया।
JQII

12

ट्रैकिंग के अन्य तरीके हैं कि आप किस टैब पर हैं; शायद कुकी की स्थापना, या किसी छिपे हुए क्षेत्र में एक मूल्य, आदि।

मैं कहूंगा कि यदि आप पृष्ठ को लोडिंग पर नहीं कूदना चाहते हैं, तो आप हैश के बजाय इन अन्य विकल्पों में से किसी एक का उपयोग करना बेहतर होगा, क्योंकि उनके लिए हैश का उपयोग करने का मुख्य कारण यह है कि आप क्या अनुमति देते हैं ब्लॉक करना चाहते हैं।

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

उम्मीद है की वो मदद करदे।


2
अच्छे अंक। जेएस / सीएसएस के बंद होने के साथ पृष्ठ को प्रयोग करने योग्य / सुलभ रखने की कोशिश करना न भूलें।
dave1010

12

मैंने dave1010 के समाधान का उपयोग किया, लेकिन जब मैंने इसे $ () तैयार फ़ंक्शन के अंदर रखा तो यह थोड़ा उछल-कूद करने वाला था। तो मैंने ऐसा किया: ($ के अंदर नहीं) (तैयार)

    if (location.hash) {               // do the test straight away
        window.scrollTo(0, 0);         // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0);     // run it a bit later also for browser compatibility
        }, 1);
    }

10
  1. <element id="abc" />अगर ब्राउज़र में पते में http://site.com/#abc हैश हो और आईडी = "एबीसी" वाला तत्व दिखाई दे तो ब्राउज़र कूद जाता है। तो, आपको बस तत्व को डिफ़ॉल्ट रूप से छिपाना चाहिए <element id="anchor" style="display: none" />:। यदि पृष्ठ पर id = hash के साथ कोई दृश्य तत्व नहीं है, तो ब्राउज़र नहीं कूदता।

  2. एक स्क्रिप्ट बनाएं जो url में हैश की जांच करता है, और फिर प्रप्रोप्रीएट तत्व को ढूंढता है और दिखाता है (जो डिफ़ॉल्ट रूप से छिपा हुआ है)।

  3. डिक्लियर ईवेंट को लिंक से लिंक करके और return false;ऑनक्लिक ईवेंट के परिणामस्वरूप निर्दिष्ट करके "हैश-लाइक लिंक" व्यवहार को अक्षम करें ।

जब मैंने टैब लागू किया, तो मैंने कुछ ऐसा लिखा:

    <script>
    $(function () {         
        if (location.hash != "") {
            selectPersonalTab(location.hash);
        }
        else {
            selectPersonalTab("#cards");
        }
    });

    function selectPersonalTab(hash) {
        $("#personal li").removeClass("active");
        $("a[href$=" + hash + "]").closest("li").addClass("active");
        $("#personaldata > div").hide();
        location.hash = hash;
        $(hash).show();
    }

    $("#personal li a").click(function (e) {
        var t = e.target;
        if (t.href.indexOf("#") != -1) {
            var hash = t.href.substr(t.href.indexOf("#"));
            selectPersonalTab(hash);
            return false;
        }
    });
</script>

6

कोई भी उत्तर मेरे लिए बहुत अच्छा काम नहीं करता है, मैं पेज को एंकर के लिए कूदता हुआ देखता हूं और फिर कुछ समाधानों के लिए शीर्ष पर जाता हूं, कुछ उत्तर बिल्कुल भी काम नहीं करते हैं, हो सकता है कि चीजें सालों से बदली हों। आशा है कि मेरा कार्य किसी की मदद करेगा।

/**
 * Prevent automatic scrolling of page to anchor by browser after loading of page.
 * Do not call this function in $(...) or $(window).on('load', ...),
 * it should be called earlier, as soon as possible.
 */
function preventAnchorScroll() {
    var scrollToTop = function () {
        $(window).scrollTop(0);
    };
    if (window.location.hash) {
        // handler is executed at most once
        $(window).one('scroll', scrollToTop);
    }

    // make sure to release scroll 1 second after document readiness
    // to avoid negative UX
    $(function () {
        setTimeout(
            function () {
                $(window).off('scroll', scrollToTop);
            },
            1000
        );
    });
}

सबसे अच्छा समाधान मुझे अब तक मिला। और वास्तव में बहुत कुछ देखा।
MarkSkayff

इसके लिए शुक्रिया! इसके अलावा केवल समाधान जो घंटों के प्रयासों के बाद मेरे लिए काम किया, लेकिन मेरे लिए इस समाधान का सबसे अच्छा हिस्सा यह है कि मुझे हैश को निकालना नहीं है।
क्रिस वेकियो

यह काम नहीं करता है, यदि स्कोरर पहले से ही पेज लोड पर पृष्ठ के शीर्ष पर है तो यह हमेशा की तरह नीचे स्क्रॉल करेगा और पृष्ठ के बाद यह शीर्ष पर कूदता है। किसी को भी पता है कि यह मामला है?
रोबघा ०१

@ robgha01 कृपया सुनिश्चित करें कि फ़ंक्शन को जितनी जल्दी हो सके निष्पादित किया जाता है और किसी भी घटना की प्रतीक्षा नहीं करता है, यह गलत है: $(document).ready(function () { preventAnchorScroll(); });बस अपने जावास्क्रिप्ट के बहुत शुरुआत में फ़ंक्शन को कॉल करें। मैंने इसे अभी परीक्षण किया है, मेरे लिए क्रोम, फ़ायरफ़ॉक्स और ओपेरा में काम करता है।
kdmitry 16

4

गंदा सीएसएस केवल हर बार स्क्रॉल किए जाने के लिए ठीक रहता है लंगर का उपयोग किया जाता है (उपयोगी नहीं है यदि आप अभी भी स्क्रॉल-जंपर्स के लिए एंकर का उपयोग करना चाहते हैं, तो डीपलिंग के लिए बहुत उपयोगी है):

.elementsWithAnchorIds::before {
   content: "";
   display: block;
   height: 9999px;
   margin-top: -9999px; //higher thin page height
}

soooooo चालाक!
दुइमे

3

हालांकि स्वीकृत उत्तर अच्छी तरह से काम करता है, मैंने पाया कि कभी-कभी, विशेष रूप से बड़ी छवियों वाले पृष्ठों पर जो स्क्रॉल बार बेतहाशा उपयोग के बारे में कूदेंगे

 window.scrollTo(0, 0);

जो उपयोगकर्ता के लिए काफी विचलित करने वाला हो सकता है।

अंत में मैंने जो समाधान किया, वह वास्तव में बहुत सरल है, और इसका उपयोग करने वाले को लक्ष्य पर एक अलग आईडी का उपयोग करना है location.hash

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

यहाँ कुछ अन्य पेज पर लिंक दिया गया है

<a href="/page/with/tabs#tab2">Some info found in tab2 on tabs page</a>

तो निश्चित रूप से अगर वहाँ एक आईडी के साथ एक तत्व है tab2 टैब पृष्ठ पर तो खिड़की लोड पर कूद जाएगी।

तो आप इसे रोकने के लिए ID में कुछ जोड़ सकते हैं:

<div id="tab2-noScroll">tab2 content</div>

और फिर आप जोड़ सकते हैं "-noScroll"करने के लिए location.hashजावास्क्रिप्ट में:

<script type="text/javascript">
    $(function() {

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;


     tabContent.not(hash + '-noScroll').hide();                           
        if(hash=="") {       //^ here
      $('#tab1-noScroll').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href") + '-noScroll'; 
                                                               //^ and here

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

2

सीएसएस पॉपअप के लिए लंगर लिंक का उपयोग करने के कारण मेरे मामले में मैंने इस तरह से उपयोग किया है:

बस क्लिक करने पर पहले pageYOffset को सेव करें और फिर उस पर स्क्रॉलटॉप सेट करें:

$(document).on('click','yourtarget',function(){
        var st=window.pageYOffset;
        $('html, body').animate({
                'scrollTop' : st
            });
});

अन्य समाधानों की कोशिश करने के बाद यह वही था जो मेरे लिए काम करता था, मेरे मामले में मैं जिस वेबसाइट के साथ काम कर रहा था, वह यूआरएल में # चेकआउट के एक विशिष्ट अनुभाग को लोड करने के लिए उपयोग की गई थी। मैंने अभी इसका उपयोग किया url में हैश के लिए चेकआउट कार्यक्षमता को संशोधित करने के बजाय। धन्यवाद
क्रिस ग

1

मुझे लगता है कि मैंने कार्यशीलता में सुधार किए बिना यूआई टैब्स के लिए एक रास्ता खोज लिया है। अब तक मुझे कोई समस्या नहीं हुई।

    $( ".tabs" ).tabs();
    $( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) { 
        window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
        return false;
    });

    var selectedTabHash = window.location.hash.replace(/tab_/,"");
    var index = $( ".tabs li a" ).index($(".tabs li a[href='"+selectedTabHash+"']"));
    $( ".tabs" ).not(".noHash").tabs('select', index);

सभी एक तैयार घटना के भीतर। यह हैश के लिए "tab_" प्रस्तुत करता है, लेकिन जब क्लिक किया जाता है और हैश के साथ लोड किया जाता है तो दोनों कार्य करते हैं।


1

यह बूटस्ट्रैप v3 के साथ काम करेगा

$(document).ready(function() {
  if ($('.nav-tabs').length) {
    var hash = window.location.hash;
    var hashEl = $('ul.nav a[href="' + hash + '"]');
    hash && hashEl.tab('show');

    $('.nav-tabs a').click(function(e) {
      e.preventDefault();
      $(this).tab('show');
      window.location.hash = this.hash;
    });

    // Change tab on hashchange
    window.addEventListener('hashchange', function() {
      var changedHash = window.location.hash;
      changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
    }, false);
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
</div>


0

एक और दृष्टिकोण

यदि पृष्ठ को स्क्रॉल किया गया है और तभी स्थिति रीसेट करें:

var scrolled = false;

$(window).scroll(function(){
  scrolled = true;
});

if ( window.location.hash && scrolled ) {
  $(window).scrollTop( 0 );
}

Heres a demo


भाई काम नहीं कर रहा है ... प्रारंभिक भार नीचे है ... ताज़ा करने के बाद यह शीर्ष पर रहता है
मार्टिन ज़्वारीक

0

setTimeoutफ़ायरफ़ॉक्स में उपरोक्त तरीकों से मुझे ज्यादा सफलता नहीं मिली ।

सेटटाइमआउट के बजाय, मैंने एक ऑनलोड फ़ंक्शन का उपयोग किया है:

window.onload = function () {
    if (location.hash) {
        window.scrollTo(0, 0);
    }
};

यह अभी भी बहुत गड़बड़ है, दुर्भाग्य से।


क्योंकि सब कुछ पूरी तरह से लोड होने के बाद ऑनलोड चलता है, जिसमें फ़ोटो भी शामिल हैं ... इसलिए निश्चित रूप से यह इस तरह से गड़बड़ है
मार्टिन ज़्वारीक

0

मुझे इन समाधानों के साथ कोई लगातार सफलता नहीं मिली है।

इस तथ्य के कारण कि कूद जावास्क्रिप्ट से पहले होता है => संदर्भ ( http://forum.jquery.com/topic/preventing-anchor-jump )

मेरा समाधान सीएसएस के साथ डिफ़ॉल्ट रूप से शीर्ष पर सभी एंकर को स्थिति देना है।

.scroll-target{position:fixed;top:0;left:0;}

फिर टारगेट एंकर के माता-पिता, या भाई-बहन (शायद खाली ईम टैग) को स्क्रॉल करने के लिए jquery का उपयोग करें

<a class="scroll-target" name="section3"></a><em>&nbsp</em>

जब URL हैश के साथ दर्ज किया जाता है तो स्क्रॉल करने के लिए jquery उदाहरण
(पृष्ठ को पहले से ही विंडो / टैब में लोड नहीं किया जाना चाहिए, यह अन्य / बाहरी स्रोतों से लिंक को कवर करता है)

setTimeout(function() {
    if (window.location.hash) {               
        var hash = window.location.hash.substr(1);   
        var scrollPos = $('.scroll-target[name="'+hash+'"]').siblings('em').offset().top; 
        $("html, body").animate({ scrollTop: scrollPos }, 1000);    
    }
}, 1);

इसके अलावा आप पृष्ठ पर रहते हुए एंकर क्लिक के लिए डिफ़ॉल्ट को रोकना चाहते हैं और फिर अपने लक्ष्य तक स्क्रॉल कर सकते हैं

<a class="scroll-to" href="#section3">section three</a>

और jquery

$('a.scroll-to').click(function(){
    var target = $(this).attr('href').substr(1);
    var scrollPos = $('.scroll-target[name="'+target+'"]').siblings('em').offset().top; 
    $("html, body").animate({ scrollTop: scrollPos }, 1000);
    return false;
});

इस पद्धति के बारे में अच्छी बात यह है कि एंकर टैग लक्ष्य हैं, प्रासंगिक सामग्री के बगल में संरचनात्मक रूप से बने रहते हैं, हालांकि उनकी सीएसएस स्थिति शीर्ष पर है।

इसका मतलब यह होना चाहिए कि खोज इंजन क्रॉलर को कोई समस्या नहीं होगी।

चीयर्स, मुझे उम्मीद है कि यह
ग्रे में मदद करता है


0

ग्राहक को हैशचेंज (आपके ईवेंट हैंडलर के अंदर) पर किसी भी तरह के वर्टिकल स्क्रॉलिंग से रोकने के लिए यह प्रयास करें:

var sct = document.body.scrollTop;
document.location.hash = '#next'; // or other manipulation
document.body.scrollTop = sct;

(ब्राउज़र redraw)


0

ऐसा करके मेरा वादा पूरा किया:

// navbar height 
var navHeigth = $('nav.navbar').height();    

// Scroll to anchor function
var scrollToAnchor = function(hash) {
  // If got a hash
  if (hash) {
    // Scroll to the top (prevention for Chrome)
    window.scrollTo(0, 0);
    // Anchor element
    var term = $(hash);

    // If element with hash id is defined
    if (term) {

      // Get top offset, including header height
      var scrollto = term.offset().top - navHeigth;

      // Capture id value
      var id = term.attr('id');
      // Capture name value
      var name = term.attr('name');

      // Remove attributes for FF scroll prevention
      term.removeAttr('id').removeAttr('name');
      // Scroll to element
      $('html, body').animate({scrollTop:scrollto}, 0);

      // Returning id and name after .5sec for the next scroll
      setTimeout(function() {
        term.attr('id', id).attr('name', name);
      }, 500);
    }
  }
};

// if we are opening the page by url
if (location.hash) {
  scrollToAnchor(location.hash);
}

// preventing default click on links with an anchor
$('a[href*="#"]').click(function(e) {
  e.preventDefault();
  // hash value
  var hash = this.href.substr(this.href.indexOf("#"));
  scrollToAnchor(hash);
});`
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.