CODEWITHSUNDEEP
javascripthtmlhash
Mayank
Mayank

Reputation: 954

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?

Upvotes: 37

Views: 69864

Answers (8)

gaurav agarwal
gaurav agarwal

Reputation: 1

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

should work for all browser, tested!

Upvotes: 0

dhc
dhc

Reputation: 657

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

Upvotes: 1

Manoj Selvin
Manoj Selvin

Reputation: 2383

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

Upvotes: 2

mknayab
mknayab

Reputation: 302

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!

Upvotes: 9

stallingOne
stallingOne

Reputation: 4006

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.

Upvotes: 52

edsonski
edsonski

Reputation: 63

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

Upvotes: 1

Saygın Karahan
Saygın Karahan

Reputation: 177

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

Upvotes: 5

henser
henser

Reputation: 3327

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)

Upvotes: 47

Related Questions