Blättern mit Anker ohne # in URL

Question

Ich muss durch eine Seite scrollen mit anchor tag.

Im Moment bin ich tun:

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

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

Das funktioniert gut, wenn ich auf Link1, die Seite scrollt nach div mit id „div1“ geklickt haben.
Der Punkt ist, ich möchte nicht meine URL ändern, die #div als Suffix, nachdem ich auf Link1 geklickt hat.

Ich habe versucht, mit Anker href wie

void(0); 

und

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

e.preventdefault; 

Wie das Ändern der URL zu vermeiden?

Answer 1

Nehmen Sie diese Antwort von Jeff Hines jQuerys belebter mit:

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

Wenn Sie jQuery verwenden, vergessen Sie nicht, die Bibliothek zu einem Projekt hinzuzufügen.

Bearbeiten: Stellen Sie auch sicher, dass Sie immer noch "false zurückgeben;" in der Click-Handler für den Link, sonst wird es immer noch die "# div1" zu Ihrer URL hinzufügen (danke @ niaccurshi)

Answer 2

Machen Sie Ihr Leben einfacher, versuchen Sie Folgendes und lassen Sie mich wissen, wenn es noch etwas gibt; -)

<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: Sie müssen nur mit einer/einzelner Linie href="javascript:void(0);" onclick="window.scroll(0,1);" spielen, um und es funktioniert für Sie.

Guten Tag!

Answer 3

hinzufügen Nur diesen Code in jquery auf Dokument bereit

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

Henser Antwort Riffing aus, ich habe einen Fall, in dem das window.location.hash bereits gesetzt ist, und der Benutzer Scrollt dann zurück zum Anfang der Seite (wo der Hash-Link ist).

Da der Hash bereits eingestellt ist, können Sie wieder finden auf diesen Link klicken, durch:

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

Answer 5

scrollIntoView hat die beste Arbeit, wenn alle anderen Methoden versagt!

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

Wo 'top' ist die ID des HTML-Tags Sie gehen möchten.

Answer 6

Ich weiß, ich bin 4 Jahre zu spät, aber Sie können das versuchen.

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); 
    }); 
})