Scroll Down to content without changing page URL

Question

<a href="#scrollDown" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

While I click the id 'up' it should scroll down and stop in to id 'down'.

Right now when I click id 'up' the URL is getting changed. for example(../loginAction#scrollDown).

How to scroll down to the id 'down' without changing the page URL. The href 'scrollDown' won't apply to the page URL.

Possible duplicate of [How to go to a specific element on page?](http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page) — nikjohn, Nov 10 '16 at 09:56
Possible duplicate of [scroll with anchor without # in URL](http://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url) — GiuServ, Nov 10 '16 at 09:56

score 3 · Answer 1 · answered Nov 10 '16 at 09:56

3

You can do that by getting the offset of the element and then scrolling to it.

var elementPosition = document.getElementById('#myElement').offsetTop;
window.scrollTo(0, elementPosition);

answered Nov 10 '16 at 09:56

Erick A. Montañez

447
1
6
11

score 1 · Answer 2 · answered Nov 10 '16 at 10:02

1

If You use href tag url will change. You can use id tag for up-down links and you can use jQuery $('#up').click

answered Nov 10 '16 at 10:02

yucel

365
4
11

score 1 · Answer 3 · answered Nov 10 '16 at 10:03

$(function() {
  $('#up').click(function(){
    $('html, body').animate({
        scrollTop: $("#down").offset().top
    }, 2000);
});
  
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="javascript:void(0)" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  v
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
















<a name="scrollDown" id="down">Stop Here</a>

</body>

I need in JS instead of jQuery. – Raja O Nov 10 '16 at 10:23 — Raja O, Nov 10 '16 at 10:23

score 1 · Answer 4 · answered Nov 10 '16 at 10:09

The url is changing because that is the value of the href attribute of the link. By default the browser is finding and scrolling to the div with the id of the url hash, so asdf.com/#someid will always display page with #someid div at the top. To avoid the url change and have the same functionality you could use custom attributes for triggers.

<p custom-target="scrollDown" id="up">Scroll Down</p>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

and then you modify your scrolling script to listen for click on p[custom-target="scrollDown"] I am changing the triggering element to p because there is no need for it to be link anymore.

Scroll Down to content without changing page URL

4 Answers4