URL में 0 के बिना एंकर के साथ स्क्रॉल करें

Question

मुझे anchor tag का उपयोग करके किसी पृष्ठ से स्क्रॉल करने की आवश्यकता है।

अभी मैं कर रहा हूँ:

<a href="#div1">Link1</a> 

<div id='div1'>link1 points me!!</div> 

यह ठीक काम करता है जब मैं Link1, आईडी "div1" के साथ div करने के लिए पृष्ठ स्क्रॉल पर क्लिक किया।
बिंदु यह है कि, मैं Link1 पर क्लिक करने के बाद #div प्रत्यय के रूप में अपना यूआरएल नहीं बदलना चाहता हूं।

मैं

void(0); 

और

location.hash='#div1'; 
return false; 

e.preventdefault; 

के रूप में लंगर href के साथ की कोशिश की URL में बदलाव करने से बचने के लिए कैसे?

Answer 1

jQuery के animate का उपयोग कर जेफ हाइन्स से इस सवाल का जवाब लें:

function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
} 

आप jQuery उपयोग कर रहे हैं अपनी परियोजना के लिए पुस्तकालय जोड़ने के लिए मत भूलना।

संपादित करें: साथ ही, सुनिश्चित करें कि आप अभी भी "झूठी वापसी करें" लिंक के लिए क्लिक हैंडलर में, अन्यथा यह अभी भी आपके यूआरएल में "# div1" जोड़ देगा (धन्यवाद @niaccurshi)

Answer 2

अपना जीवन आसान बनाएं, निम्न कोशिश करें और मुझे कुछ और बताएं तो मुझे बताएं;)

<div>top</div> 
<div style="height: 800px;">&nbsp;</div> 
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div> 

FYI करें: आप केवल एक ही/एकल लाइन href="javascript:void(0);" onclick="window.scroll(0,1);" के साथ चारों ओर खेलने के लिए की जरूरत है और यह आप के लिए काम करता है।

एक अच्छा दिन है!

Answer 3

केवल दस्तावेज़ तैयार पर jQuery में यह कोड जोड़ें

रेफरी: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 4

henser के जवाब बंद riffing, मैं एक मामले में जहां window.location.hash पहले से ही सेट कर दिया जाता है, और उपयोगकर्ता फिर पृष्ठ के शीर्ष पर वापस स्क्रॉल करता है (जहां हैश लिंक है)।

के बाद से हैश पहले से ही सेट कर दिया जाता है, तो आप द्वारा उस लिंक पर क्लिक पर फिर से पता लगा सकते हैं:

$(window).scrollTop($('a[name='+id+']').offset().top);

Answer 5

scrollIntoView जब अन्य सभी तरीके नाकाम सबसे अच्छा काम किया है!

document.getElementById('top').scrollIntoView(true); 

कहाँ 'top' HTML टैग आप जाना चाहते हैं की आईडी है।

Answer 6

मुझे पता है कि मैं 4 साल देर से हूं, लेकिन आप लोग इसे आजमा सकते हैं।

HTML:

<a href="#div1">Link1</a> 
<!-- you can put <br />'s here to see effect --> 
<div id='div1'>link1 points me!!</div> 
<!-- <br />'s here, too, to see effect --> 

जावास्क्रिप्ट/jQuery

$(document).ready(function(){ 
    $('a').on('click', function(event) { 
     event.preventDefault(); 
     var hash = this.hash; 
     $('html, body').animate({scrollTop: $(hash).offset().top}, 900); 
    }); 
})