Przewiń za pomocą kotwicy bez # w adresie URL

Question

Potrzebuję przewinąć stronę, używając anchor tag.

Teraz robię:

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

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

Działa to dobrze, gdy kliknąłem na link1, przewija stronę do div o identyfikatorze „div1”.
Chodzi o to, że nie chcę zmieniać adresu URL, który przyjmuje #div jako sufiks po kliknięciu na Link1.

Próbowałem z zakotwiczenia href jako

void(0); 

i

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

e.preventdefault; 

Jak uniknąć zmiany adresu URL?

Answer 1

Weź tę odpowiedź od Jeff Hines użyciu ożywione jQuery:

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

Jeśli używasz jQuery nie zapomnij dodać bibliotekę do projektu.

Edycja: Upewnij się też, że nadal "zwracasz fałsz;" w module obsługi kliknięcia dla linku, w przeciwnym razie nadal będzie dodawał "# div1" do adresu URL (dzięki @niaccurshi)

Answer 2

Ułatw sobie życie, wypróbuj następujące rozwiązania i daj mi znać, jeśli coś jeszcze jest nie tak;)

<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: tylko trzeba się bawić z jednego/jednej linii href="javascript:void(0);" onclick="window.scroll(0,1);" i to działa dla Ciebie.

Miłego dnia!

Answer 3

Only Dodaj ten kod na jQuery na dokumencie gotowy

Ref: 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

riffy off odpowiedź henser za, mam przypadek, w którym window.location.hash jest już ustawiony, a użytkownik następnie przewija z powrotem na górę strony (gdzie znajduje się link hash).

Ponieważ hash jest już ustawiony, można ponownie znaleźć po kliknięciu tego łącza przez:

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

Answer 5

scrollIntoView zrobił najlepszą pracę, gdy wszystkie inne metody zawiodły!

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

Gdzie 'top' jest identyfikatorem znacznika html, który chcesz przejść.

Answer 6

Jestem pewien, że spóźniłem się o 4 lata, ale możecie to wypróbować.

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

JavaScript/jQuery

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