Scroll with anchor without # in URL

问题:

I need to scroll through a page using anchor tag.

Right now I'm doing:

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

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

This works fine when I clicked on Link1, the page scrolls to the div with id "div1".
The point is, I do not want to change my URL which takes #div as suffix once I clicked on Link1.

I tried with anchor href as

void(0);

and

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

e.preventdefault;

How to avoid changing the URL?

回答1:

Take this answer from Jeff Hines using jQuery's animate:

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

If you're using jQuery don't forget to add the library to your project.

Edit: Also, make sure that you still "return false;" in the click handler for the link, otherwise it'll still add the "#div1" to your URL (thanks @niaccurshi)

回答2:

scrollIntoView did the best job when all other methods failed!

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

Where 'top' is the id of the html tag you want to go.

回答3:

Make your life easier, try the following and let me know if there is anything else ;-)

<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: You only need to play around with one/single line href="javascript:void(0);" onclick="window.scroll(0,1);" and it works for you.

Have a good day!

回答4:

riffing off henser's answer, I have a case where the window.location.hash is already set, and the user then scrolls back to the top of the page (where the hash link is).

Since the hash is already set, you can re-locate on clicking that link by:

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

回答5:

Only Add this code into jquery on document ready

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

回答6:

I'm know I'm 4 years late, but you guys can try this.

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

回答7:

Add smooth scroll to any item click including anchor, button etc without adding div id to URL :)

Info: scrollIntoViewOptions(Optional) { behavior: "auto" | "instant" | "smooth", block: "start" | "end", }

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

Reference: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView