How to scroll an HTML page to a given anchor

Question

I’d like to make the browser to scroll the page to a given anchor, just by using JavaScript.

I have specified a name or id attribute in my HTML code:

 <a name="anchorName">..</a>

or

 <h1 id="anchorName2">..</h1>

I’d like to get the same effect as you’d get by navigating to http://server.com/path#anchorName. The page should be scrolled so that the anchor is near the top of the visible part of the page.

score 408 · Accepted Answer · answered Jul 02 '10 at 06:25

408

function scrollTo(hash) {
    location.hash = "#" + hash;
}

No jQuery required at all!

answered Jul 02 '10 at 06:25

Dean Harding

71,468
13
145
180

I tried this and decided to use this. You were also the first and had shortest code. – Juha Syrjälä Jul 02 '10 at 06:38
110

That doesn't actually scroll though, it just jumps. At that point you might as well just link to the anchor `link` – Ryan Feb 07 '14 at 22:32
@chrisツ It change the URL adding the "#anchor", right? – QUB3X Aug 19 '14 at 12:22
@Qubex_ yes, I think so – chris Aug 20 '14 at 08:30
1

neat and does it without reloading the page. Thanks! – Alveoli Sep 12 '14 at 23:29
68

Note that this will only work once. Once the hash is set, the page won't scroll to the same hash unless you change it to a dummy one then set it again. – Cristian Vrabie Nov 10 '14 at 17:05
When you set the value, you have to omit the hash sign. "location.hash = hash;" - which also makes it pretty weird to wrap it in a function – nico gawenda Dec 23 '14 at 15:32
@Ryan The question was about how to do it in javascript, not HTML. – Benny Schmidt May 13 '15 at 17:01
-one - it doesn't scroll – Srneczek Dec 27 '15 at 15:48
22

You should not use scrollTo, because it is already used by the global window object. Also the parameter should not be named hash, because location.hash is defined, too. You may use this code: `function scrollToHash(hashName) { location.hash = "#" + hashName; }` – Markus Zeller Feb 02 '16 at 10:32
5

@MarkusZeller, why shouldn't the parameter be called hash? It doesn't collide with location, does it? – Gherman Dec 05 '16 at 12:46
@German Oh, you're right. Hash is of course independent of the location object. – Markus Zeller Dec 06 '16 at 09:33
17

this does scroll if you set "scroll-behavior: smooth;" on the html element – stackers Jul 22 '19 at 18:29

Armando Pérez Marqués · Answer 2 · 2015-05-21T16:24:59.153

280

Way simpler:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

edited May 21 '15 at 16:24

answered Jul 03 '10 at 01:24

Armando Pérez Marqués

5,661
4
28
45

33

I at first thought Mandx was trolling, then I tried this and it worked. Beyond me how I never came across this method before. [Mozilla Docs for this method](https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView). Also, it appears that this will be very well supported in browsers. – Jonathan Dumaine Apr 11 '13 at 05:19
2

I've had a lot of issues with jquery solutions not scrolling. This saved me a lot of frustration. – NuclearPeon Jul 16 '14 at 21:05
3

**WARNING!** This method can have problems if a div above it contains floating elements and cannot determine its size easily. – vogomatix Jan 03 '17 at 14:30
6

This is a clean solution, however as of now it doesn't allow any tweaking, it does a hard scroll. There is an experimental parameter `scrollIntoViewOptions` that has a `behavior: "smooth"` option, but it is currently compatible with Firefox only. – nunop Jan 12 '17 at 10:10
How to animate this? – Lying_cat Jun 21 '19 at 02:32
@SkuraZZ Best to ask a new question for this, since I just came across this coincidentally. But in any case, you can use `scroll-behavior: smooth`. See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior – Vincent Nov 16 '19 at 14:55
I don't see any animation here – Nathan B Jan 05 '21 at 14:40
1

If you think you want smooth scroll you should use `document.getElementById("xyz").scrollIntoView({block:"nearest", behavior:"smooth"});` so that the user doesn't get forced smooth scroll if they have disabled that in browser settings. Safari doesn't support this so it will just snap into correct position without animation. You should use this instead of scrolling to given pixel offset because this honors e.g. `scroll-margin` properties automatically. Reimplementing support for `scroll-margin` would be pretty complex. – Mikko Rantalainen Sep 23 '21 at 08:53

score 127 · Answer 3 · edited Jul 28 '21 at 21:11

127

You can use jQuery's .animate(), .offset() and scrollTop. Like

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

Example link: http://jsbin.com/unasi3/edit

If you don't want to animate, use .scrollTop() like:

$(document.body).scrollTop($('#anchorName2').offset().top);

Or JavaScript's native location.hash like:

location.hash = '#' + anchorid;

edited Jul 28 '21 at 21:11

Peter Mortensen

30,738
21
105
131

answered Jul 02 '10 at 06:22

jAndy

231,737
57
305
359

1

As far as creating a selector to find the `
` or an ``, use `$('#'+hash+',a[name='+hash+']')` or slightly optimized `$(document.getElementById(hash) || 'a[name='+hash+']')` which will search for the element by id first, and resort to searching the a's only if one isn't found.
– gnarf Jul 02 '10 at 07:36
@gnarf - There isn't any need to optimize the '#' selectors in jQuery - they're already optimized for you. It's fairly easy to see if you've read the jQuery source code. – CodeJoust Jan 23 '13 at 07:04
3

@CodeJoust - I'm on the jQuery team, I've read it many times, and yes `$("#selector")` is optimized but `$("#selector,a[name='selector']")` won't go through the same optimizations as quickly. I suppose my 2.5 year old comment is a little strange sounding. The "optimization" is avoiding the `a[name='selector']` search if it finds the id, not optimizing searching for the id. – gnarf Jan 23 '13 at 21:13
1

I had some luck with this approach: About – Jazzy Aug 25 '13 at 18:32
sometimes this is not accurate... when the page has dynamic parts with lazy load – Nathan B Jan 05 '21 at 14:32

Илья Зеленько · Answer 4 · 2023-08-09T11:09:18.357

2018-now Pure JavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

Note that `scrollIntoView` suffers from the same problem `scrollto(some px location)` does - if the location of the element changes as you scroll, you will scroll to the wrong position. This can easily happen if you, for example, have unknown-dimension images loading while you're scrolling, which will push the scroll target element down, and your nice fancy scroll will stop short in an over-dramatized epic fail. — goat, Sep 14 '20 at 08:04
Note that if you use web fonts with `font-display: swap` you may end up with slightly incorrect scroll offset if you measure the scroll position before the fonts are swapped in. And when you use `font-display: swap` the swapping is asyncronous and depends on client network speed, DNS servers, web font hosting CDN and client CPU power so it's practically random. The best you can do is to try to detect the event for font loading: https://stackoverflow.com/a/66739727/334451 — Mikko Rantalainen, Sep 23 '21 at 10:05

score 39 · Answer 5 · edited Jul 28 '21 at 21:14

39

Great solution by jAndy, but the smooth scroll seems to be having issues working in Firefox.

Writing it this way works in Firefox as well.

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

edited Jul 28 '21 at 21:14

Peter Mortensen

30,738
21
105
131

answered Jul 07 '12 at 11:11

5hahiL

1,056
16
36

1

In the latest Chrome release this is the only method I have found that consistently works. Thanks for the tip! – gaborous Jun 06 '20 at 09:36
Very sexy scroll – clamum Jun 14 '22 at 16:07

score 35 · Answer 6 · edited Aug 25 '23 at 12:51

35

The easiest way to to make the browser to scroll the page to a given anchor is to add *{scroll-behavior: smooth;} in your style.css file and in your HTML navigation use #NameOfTheSection.

*{scroll-behavior: smooth;}

<a href="#scroll-to">Click to Scroll</a>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>

edited Aug 25 '23 at 12:51

Yuvraj Patil

7,944
5
56
56

answered Jun 22 '20 at 03:13

eslam elameen

429
4
6

2

This CSS method works great for me and is super elegant! – Dave Sep 05 '21 at 01:45
1

I agree with Dave, super elegant CSS only then just handled by the browser no JS no JQuery – Robert Nov 01 '22 at 14:58
the best answer ever! – Jeff Monteiro Apr 14 '23 at 22:15

score 30 · Answer 7 · edited Apr 02 '20 at 11:49

In 2018, you don't need jQuery for something simple like this. The built in scrollIntoView() method supports a "behavior" property to smoothly scroll to any element on the page. You can even update the browser URL with a hash to make it bookmarkable.

From this tutorial on scrolling HTML Bookmarks, here is a native way to add smooth scrolling to all anchor links on your page automatically:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Excellent answer that removes dependency on jQuery – zai chang Dec 01 '18 at 00:51 — zai chang, Dec 01 '18 at 00:51
Wow! Works awesome! – Alexandru Trandafir Catalin Jun 26 '19 at 23:48 — Alexandru Trandafir Catalin, Jun 26 '19 at 23:48
What is *"relitere"*? Is there a typo? – Peter Mortensen Jul 28 '21 at 21:31 — Peter Mortensen, Jul 28 '21 at 21:31

score 29 · Answer 8 · edited Jul 28 '21 at 21:22

29

Here is a pure JavaScript solution without jQuery. It was tested on Chrome and Internet Explorer, but not tested on iOS.

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

Demo: https://jsfiddle.net/jd7q25hg/12/

edited Jul 28 '21 at 21:22

Peter Mortensen

30,738
21
105
131

answered Apr 29 '16 at 04:09

Michael Whinfrey

573
4
14

1

Apologies for commenting on an old topic but this works best for me as my project isn't using JQuery. Only issue I noticed is that it misses off 5 pixels or so if you scroll to the very top. – AntBirch Aug 04 '16 at 09:39
Very refreshing to see a pure js version. I teach students to always look under the hood and understand what JQuery does for them, so this is a nice example. – Dave Everitt Feb 11 '17 at 22:05
2

This should be the accepted answer: it is a pure js example AND it achieves the desired scrolling animation effect. I adjusted the timeout value to 20 and it works flawlessly. – Mark Barrasso Dec 02 '17 at 03:01
Thank you I love pure javascript solutions – R01010010 Jan 27 '18 at 12:34
I had to remove the multiplication by .2; it then went directly to my element. This works great if you are placing your data via document writes and you need to navigate after the page has completed loading. Straight hash navigation from the URL doesn't work in that case. Stick it in an event listener for page load. – TadLewis Jan 06 '20 at 21:57
2

Works in IOS just tested it. – Debbie Kurth Feb 18 '20 at 04:19

Arseniy-II · Answer 9 · 2021-06-11T11:42:41.813

18

Smoothly scroll to the proper position

Get correct y coordinate and use window.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({top: y, behavior: 'smooth'});

edited Jun 11 '21 at 11:42

answered Jul 05 '19 at 02:55

Arseniy-II

8,323
5
24
49

I think you should add the following to CSS style file: ```css html { scroll-behavior: smooth; } ``` – parismiguel Sep 09 '19 at 20:05

score 5 · Answer 10 · edited Jul 28 '21 at 21:20

5

Most answers are unnecessarily complicated.

If you just want to jump to the target element, you don't need JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

If you want to scroll to the target animatedly, please refer to 5hahiL's answer.

edited Jul 28 '21 at 21:20

Peter Mortensen

30,738
21
105
131

answered Feb 19 '15 at 02:40

Brian

30,156
15
86
87

Sometimes, you need to do it dynamically, though; i.e., through no direct action of the user. I believe that's what the OP wants. – jpaugh Jul 03 '15 at 19:13
1

Yes, clearly the OP was already aware of anchor link functionality. – isherwood Dec 05 '16 at 20:38

score 5 · Answer 11 · edited Feb 23 '17 at 19:33

The solution from CSS-Tricks no longer works in jQuery 2.2.0. It will throw a selector error:

JavaScript runtime error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

I fixed it by changing the selector. The full snippet is this:

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

score 5 · Answer 12 · answered Feb 14 '12 at 03:25

5

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

answered Feb 14 '12 at 03:25

cactis

205
5
5

An explanation would be in order. E.g., what is the idea/gist? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/9271279/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Jul 28 '21 at 21:12

score 4 · Answer 13 · answered Jul 02 '18 at 13:09

4

This works:

$('.scroll').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Just add the class 'scroll' to any links you wish to animate

answered Jul 02 '18 at 13:09

Chuck Le Butt

47,570
62
203
289

Nice, simple to use solution. Thanks! – Smitty-Werben-Jager-Manjenson Nov 08 '19 at 21:33

score 3 · Answer 14 · edited Jul 28 '21 at 21:29

This is a working script that will scroll the page to the anchor. To set it up, just give the anchor link an id that matches the name attribute of the anchor that you want to scroll to.

<script>
    jQuery(document).ready(function ($){
        $('a').click(function (){
            var id = $(this).attr('id');
            console.log(id);
            if ( id == 'cet' || id == 'protein' ) {
                $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow');
            }
        });
    });
</script>

score 3 · Answer 15 · answered Jul 17 '18 at 11:40

3

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

answered Jul 17 '18 at 11:40

Adam Pery

1,924
22
21

score 1 · Answer 16 · edited Jul 28 '21 at 21:17

1

I found an easy and simple jQuery solution on CSS-Tricks. That's the one I'm using now.

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

edited Jul 28 '21 at 21:17

Peter Mortensen

30,738
21
105
131

answered Jan 06 '15 at 20:26

Horacio

1,794
1
16
23

1

The selector is throwing an exception in jquery 2.2.0. 0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: a[href*=#]:not([href=#]) – Bill Shihara Jan 10 '16 at 00:04

score 1 · Answer 17 · edited Jul 28 '21 at 21:36

A Vue.js 2 solution ... add a simple data property to simply force the update:

  const app = new Vue({
  ...

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* Smooth scrolling in CSS - it works in HTML5 only */
 html, body {
     scroll-behavior: smooth;
 }

How to scroll an HTML page to a given anchor

17 Answers17

` or an ``, use `$('#'+hash+',a[name='+hash+']')` or slightly optimized `$(document.getElementById(hash) || 'a[name='+hash+']')` which will search for the element by id first, and resort to searching the a's only if one isn't found.

2018-now Pure JavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

Smoothly scroll to the proper position

Linked

Related