Question

44

Scroll with anchor without # in URL

rated 0 times [ 45] [ 1] / answers: 1 / hits: 65573 / 11 Years ago, tue, march 5, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jessie

Add To Favorites

Follow

Total Points: 713

Total Questions: 87

Total Answers: 109

Location: Australia

Member since Sat, May 27, 2023

1 Year ago

answered 11 Years ago devonw · Accepted Answer

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)