it-swarm.com.de

Mit Anker ohne # in der URL blättern

Ich muss mit anchor tag durch eine Seite scrollen. 

Ich mache gerade:

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

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

Dies funktioniert gut, wenn ich auf Link1 klickte, die Seite scrollt zu der div mit der ID "div1".
Der Punkt ist, ich möchte meine URL nicht ändern, die #div als Suffix annimmt, sobald ich auf Link1 geklickt habe.

Ich habe versucht mit anker href als

void(0);

und

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

e.preventdefault;

Wie vermeide ich, die URL zu ändern?

22
mayank

Nehmen Sie diese Antwort von Jeff Hines mit jQuery's animated:

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

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

Bearbeiten: Stellen Sie außerdem sicher, dass Sie immer noch "false" zurückgeben. im Click-Handler für den Link, andernfalls wird immer noch "# div1" zu Ihrer URL hinzugefügt (danke @niaccurshi)

40
henser

scrollIntoView hat den besten Job gemacht, wenn alle anderen Methoden fehlgeschlagen sind!

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

Wo 'top' die ID des HTML-Tags ist, das Sie verwenden möchten.

19
stallingOne

Mach dein Leben einfacher, versuche folgendes und lass mich wissen, ob 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 einzelnen Zeile href="javascript:void(0);" onclick="window.scroll(0,1);" herumspielen, und es funktioniert für Sie.

Haben Sie einen guten Tag!

5
mknayab

Riffing off Hensers Antwort , ich habe einen Fall, in dem die window.location.hash ist bereits festgelegt, und der Benutzer scrollt zurück zum Anfang der Seite (wo sich der Hash-Link befindet).

Da der Hash bereits gesetzt ist, können Sie diesen Link durch Klicken erneut suchen, indem Sie:

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

Fügen Sie diesen Code nur in jquery in document ready ein

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;
      }
    }
  });
});
1
Saygın Karahan

Fügen Sie jedem Elementklick einen glatten Bildlauf hinzu, einschließlich Anker, Schaltfläche usw., ohne der URL eine Div-ID hinzuzufügen :)

Info:scrollIntoViewOptions (optional) { Verhalten: "auto" | "sofort" | "glatt", block: "start" | "Ende", }

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}
#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}
<button onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</button>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>

DEMO

Referenz: https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

0
Manoj Selvin

Ich weiß, dass ich 4 Jahre zu spät komme, aber ihr könnt es 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);
    });
})
0
edsonski