जब एक लिंक पर क्लिक किया जाता है जो जावास्क्रिप्ट को ट्रिगर करता है तो मैं किसी वेब पेज को शीर्ष पर स्क्रॉल करने से कैसे रोकूं?

135

जब मेरे पास एक लिंक होता है जो एक jQuery या जावास्क्रिप्ट घटना के साथ वायर्ड-अप होता है जैसे:

<a href="#">My Link</a>

मैं पृष्ठ को शीर्ष पर स्क्रॉल करने से कैसे रोकूं? जब मैं एन्कर से href विशेषता को हटाता हूं, तो पृष्ठ शीर्ष पर स्क्रॉल नहीं करता है, लेकिन लिंक क्लिक-सक्षम नहीं दिखाई देता है।

javascript html

— Achilles
स्रोत

197

आपको क्लिक इवेंट (लिंक लिंक पर नेविगेट करने) के लिए डिफ़ॉल्ट क्रिया को रोकने की आवश्यकता है।

इसे करने के दो तरीके हैं।

विकल्प 1: `event.preventDefault()`

.preventDefault()अपने हैंडलर को पास की गई ईवेंट ऑब्जेक्ट की विधि को कॉल करें । यदि आप अपने हैंडलर को बांधने के लिए jQuery का उपयोग कर रहे हैं, तो वह घटना इसका एक उदाहरण jQuery.Eventहोगी और यह jQuery का संस्करण होगा .preventDefault()। यदि आप addEventListenerअपने हैंडलर को बांधने के लिए उपयोग कर रहे हैं , तो यह एक Eventऔर कच्चा डोम संस्करण होगा .preventDefault()। किसी भी तरह से आप की जरूरत होगी।

उदाहरण:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

विकल्प 2: `return false;`

JQuery में :

किसी ईवेंट हैंडलर से झूठा वापस आना ईवेंट को स्वचालित रूप से कॉल करेगा ।stopPropagation () और event.preventDefault)

तो, jQuery के साथ, आप डिफ़ॉल्ट लिंक व्यवहार को रोकने के लिए वैकल्पिक रूप से इस दृष्टिकोण का उपयोग कर सकते हैं:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

यदि आप कच्चे डोम ईवेंट का उपयोग कर रहे हैं, तो यह आधुनिक ब्राउज़र पर भी काम करेगा, क्योंकि HTML 5 कल्पना इस व्यवहार को निर्धारित करती है। हालांकि, कल्पना के पुराने संस्करणों ने ऐसा नहीं किया, इसलिए यदि आपको पुराने ब्राउज़रों के साथ अधिकतम संगतता की आवश्यकता है, तो आपको .preventDefault()स्पष्ट रूप से कॉल करना चाहिए । स्पर्धा के लिए event.preventDefault () बनाम गलत (कोई jQuery) लौटें ।

— पाओलो बर्गेंटिनो
स्रोत

9

एक समाधान (3 वर्ष देर से) पोस्ट किया गया है जिसमें एक क्लिक हैंडलर संलग्न करने की आवश्यकता नहीं है: stackoverflow.com/a/11246131/216941

— मैट क्रिंकलाव-वोग

इस मामले में, अकिलीस ऐसा सिर्फ इसलिए कर रहा है क्योंकि वह चाहता है कि लिंक क्लिक योग्य दिखाई दे, जिसके लिए उसे href = "#" का उपयोग करने की आवश्यकता नहीं है। अधिक जानकारी के लिए मेरा जवाब देखें।

— एसीपोपर

164

आप #!इसके बजाय अपने href सेट कर सकते हैं#

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

<a href="#!">Link</a>

क्लिक करने पर कोई स्क्रॉलिंग नहीं करेगा।

सावधान रहें! यह अभी भी क्लिक किए जाने पर ब्राउज़र के इतिहास में एक प्रविष्टि जोड़ देगा, जिसका अर्थ है कि आपके लिंक पर क्लिक करने के बाद, उपयोगकर्ता का पिछला बटन उन्हें उस पृष्ठ पर नहीं ले जाएगा, जो वे पहले थे। इस कारण से, इसका उपयोग करना बेहतर है.preventDefault() दृष्टिकोण या संयोजन में दोनों ।

यहाँ एक फिडल है यह चित्रण (बस अपने ब्राउज़र को नीचे स्क्रॉल करें जब तक कि आपका स्क्रॉलबार नहीं मिलता है):
http://jsfiddle.net/9dEG7/

चश्मा के लिए - यह क्यों काम करता है:

यह व्यवहार एक टुकड़ा पहचानकर्ता अनुभाग पर नेविगेट करने के तहत HTML5 कल्पना में निर्दिष्ट है । "#"दस्तावेज़ के शीर्ष पर स्क्रॉल करने का कारण बनता है कि एक href के साथ एक लिंक यह है कि यह व्यवहार स्पष्ट रूप से एक खाली टुकड़ा पहचानकर्ता को संभालने के तरीके के रूप में निर्दिष्ट किया गया है:

2. यदि fragidरिक्त स्ट्रिंग है, तो दस्तावेज़ का संकेत दिया गया हिस्सा दस्तावेज़ का शीर्ष है

का उपयोग करते हुए "#!"इसके बजाय केवल इसलिए काम करता है क्योंकि यह इस नियम से बचता है। वहाँ विस्मयादिबोधक चिह्न बारे में कुछ नहीं जादू है - क्योंकि यह काफ़ी एक ठेठ fragid करने के लिए अलग और की संभावना नहीं है कभी मेल खाते हैं कि यह सिर्फ एक सुविधाजनक टुकड़ा पहचानकर्ता बनाता है idया nameअपने पृष्ठ पर एक तत्व की। वास्तव में, हम हैश के बाद लगभग कुछ भी डाल सकते हैं; केवल ऐसे टुकड़े जो पर्याप्त नहीं होंगे, वे रिक्त स्ट्रिंग, शब्द 'शीर्ष', या उस तार से मेल खाते nameया idतत्वों के गुण हैं।

अधिक सटीक रूप से, हमें केवल एक टुकड़े करने वाले पहचानकर्ता की आवश्यकता है जो हमें निम्नलिखित एल्गोरिथ्म में निर्धारित करने के लिए चरण 8 के माध्यम से गिरने का कारण बनेगा दस्तावेज़ से संकेतित भाग के

URL के लिए URL पार्सर एल्गोरिदम लागू करें, और दें fragid जिसके परिणामस्वरूप पार्स URL के टुकड़ा घटक हो।

अगर fragid रिक्त स्ट्रिंग है, तो दस्तावेज़ का संकेत दिया गया हिस्सा दस्तावेज़ का शीर्ष है; यहाँ एल्गोरिथ्म बंद करो।

चलो fragid bytes प्रतिशत-डिकोडिंग का परिणाम है fragid।

आज्ञा देना decoded fragidलागू करने का परिणाम हो UTF-8 डिकोडर एल्गोरिथ्मfragid bytes । यदि UTF-8 डिकोडर एक डिकोडर त्रुटि का उत्सर्जन करता है, तो डिकोडर को निरस्त करें और इसके बजाय लेबल किए गए चरण पर जाएं no decoded fragid।

अगर DOM में कोई ऐसा एलिमेंट है जिसकी ID बिलकुल बराबर है decoded fragid , तो ट्री ऑर्डर में पहला ऐसा तत्व दस्तावेज का संकेतित भाग है; यहाँ एल्गोरिथ्म बंद करो।

कोई डिकोड किया हुआ टुकड़ा नहीं : यदि DOM में कोई तत्व है जिसका नाम विशेषता है जिसका मान बिल्कुल बराबर है fragid( नहीं)decoded fragid ) के , तो ट्री ऑर्डर में पहला ऐसा तत्व दस्तावेज़ का संकेत दिया गया हिस्सा है; यहाँ एल्गोरिथ्म बंद करो।

अगर नाजुक स्ट्रिंग के लिए एक ASCII केस-असंवेदनशील मैच है top, तो दस्तावेज़ का संकेत दिया गया हिस्सा दस्तावेज़ में सबसे ऊपर है; यहाँ एल्गोरिथ्म बंद करो।

अन्यथा, दस्तावेज़ का कोई संकेतित हिस्सा नहीं है।

जब तक हम कदम 8 और मारा दस्तावेज़ का कोई संकेतित हिस्सा नहीं है , तब तक निम्न नियम चलन में आते हैं:

यदि कोई संकेतित भाग नहीं है ... तो उपयोगकर्ता एजेंट को कुछ भी नहीं करना चाहिए।

यही कारण है कि ब्राउज़र स्क्रॉल नहीं करता है।

— मैट क्रिंकलाव-वोग्ट
स्रोत

4

कोई बात नहीं अगर तुम डाल दिया! ' या कोई भी अन्य मूल्य, जब तक कि आईडी DOM का हिस्सा नहीं है।

— गोपीनाथ

3

एक बार इस पद्धति के अधिवक्ता होने के बाद, मैंने 180 से किया है और इसके खिलाफ सलाह देता हूं। खबरदार: इस तरह के लिंक अभी भी पृष्ठ URL को बदल देंगे, जिसके परिणामस्वरूप ब्राउज़र के इतिहास में एक अतिरिक्त प्रविष्टि होगी और "बैक" बटन के कारण केवल उपयोगकर्ता को उम्मीद है कि करने के बजाय URL से टुकड़े को हटा दें। इस प्रकार यह समाधान अपने आप में, इस सवाल का जवाब देते समय, आमतौर पर preventDefault()एक क्लिक हैंडलर में उपयोग करने के लिए वांछनीय विकल्प नहीं है - बल्कि दुख की बात है।

— मार्क एमी

1

Href = "जावास्क्रिप्ट:" का उपयोग क्यों नहीं किया जा रहा है; बजाय? जहाँ तक मुझे पता है कि यह ब्राउज़र के इतिहास को नहीं बदलेगा। मेरे जवाब पर इसके बारे में पोस्ट किया।

— एसीपोपर

30

इस कोड का लाभ उठाने के लिए एक आसान तरीका है:

<a href="javascript:void(0);">Link Title</a>

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

इन कारणों के लिए, उपरोक्त समाधान से बेहतर है:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

यदि अंतिम समाधान स्क्रॉल-जम्प समस्या से बचता है यदि और केवल तभी जब MyClickHandler विधि विफल नहीं होती है।

— phreeskier
स्रोत

12

जिस कोड को आप कॉल कर रहे हैं, उससे झूठे काम करना और कई परिस्थितियों में पसंदीदा तरीका है, लेकिन आप ऐसा कर सकते हैं

<a href="javascript:;">Link Title</a>

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

— डीन
स्रोत

9

आपको बदलना चाहिए

<a href="#">My Link</a>

सेवा

<a href="javascript:;">My Link</a>

इस तरह जब लिंक पर क्लिक किया जाता है तो पृष्ठ शीर्ष पर नहीं जाएगा। यह href = "#" का उपयोग करने और फिर डिफ़ॉल्ट ईवेंट को चलने से रोकने से क्लीनर है।

मेरे पास इस प्रश्न के पहले उत्तर के लिए अच्छे कारण हैं , जैसे कि return false;वसीयत निष्पादित नहीं होगी यदि बुलाया फ़ंक्शन एक त्रुटि फेंकता है, या आप फ़ंक्शन return false;को जोड़ सकते हैं doSomething()और फिर उपयोग करना भूल सकते हैंreturn doSomething();

— achecopar
स्रोत

7

इसे इस्तेमाल करे:

<a href="#" onclick="return false;">My Link</a>

— mikeluby
स्रोत

4

यदि आप बस hrefमान बदल सकते हैं , तो आपको उपयोग करना चाहिए:

<a href="javascript:void(0);">Link Title</a>

एक और साफ समाधान जो मैं अभी ले आया हूं, क्लिक करने की क्रिया को रोकने के लिए jQuery का उपयोग करना है और पृष्ठ को स्क्रॉल करने का कारण बनता है, लेकिन केवल href="#"लिंक के लिए।

<script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

— dazbradbury
स्रोत

निश्चित रूप से लाइन के return falseबाद होना चाहिए preventDefault(), अन्यथा आप इस दूसरी पंक्ति में कभी नहीं पहुंचेंगे।

— होबेले

3

पहली जगह में पृष्ठ के शीर्ष से कुछ अधिक समझदार से लिंक करें। फिर डिफ़ॉल्ट ईवेंट रद्द करें।

व्यावहारिक प्रगति के नियम 2 देखें ।

— क्वेंटिन
स्रोत

इससे आप साइट को और अधिक SEO फ्रेंडली बना सकते हैं।

— फ्रेंकी

2

इसके अलावा, आप onclick विशेषता के अंदर event.preventDefault का उपयोग कर सकते हैं ।

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

एक्स्ट्रा क्लिक इवेंट लिखने की जरूरत नहीं है।

— efirat
स्रोत

0

आप बस इस तरह भी लिख सकते हैं: -

<a href="#!" onclick="function()">Delete User</a>

— user2436792
स्रोत

0

फ़ंक्शन को कॉल करते समय, return false उदाहरण के लिए इसका पालन करें :

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

— बुद्धी वीरसिंघे
स्रोत

0

एक पेज बनाएं जिसमें दो लिंक हों- एक सबसे ऊपर और एक सबसे नीचे। शीर्ष लिंक पर क्लिक करने पर, पृष्ठ को उस पृष्ठ के नीचे स्क्रॉल करना होगा जहां नीचे लिंक मौजूद है। नीचे लिंक पर क्लिक करने पर, पृष्ठ को पृष्ठ के शीर्ष तक स्क्रॉल करना होगा।

— दामिनी
स्रोत

0

<a onclick="yourfunction()">

यह ठीक काम करेगा। href = "#" जोड़ने की कोई आवश्यकता नहीं है

— वरज विग्नेश
स्रोत

0

आप अपने CSS को जांचना चाहते हैं। यहाँ उदाहरण में: https://css-tricks.com/the-checkbox-hack/ वहाँ position: absolute; top: -9999px;। यह क्रोम पर विशेष रूप से नासमझ है, क्योंकि onclick="whatever"अभी भी क्लिक किए गए तत्व की पूर्ण स्थिति के लिए कूदता है।

हटाने position: absolute; top: -9999px;, display: none;मदद के लिए हो सकता है।

— स्कॉट फिलिप्स
स्रोत

0

पतन के लिए बूटस्ट्रैप 3 के लिए, यदि आप लंगर पर डेटा-लक्ष्य निर्दिष्ट नहीं करते हैं और लक्ष्य को निर्धारित करने के लिए href पर भरोसा करते हैं, तो घटना को रोका जा सकेगा। यदि आप डेटा-लक्ष्य का उपयोग करते हैं, तो आपको स्वयं घटना को रोकने की आवश्यकता होगी।

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>

— डौग
स्रोत

विकल्प 1: event.preventDefault()

विकल्प 2: return false;

चश्मा के लिए - यह क्यों काम करता है:

विकल्प 1: `event.preventDefault()`

विकल्प 2: `return false;`