JavaScript to scroll long page to DIV

Question

I have a link on a long HTML page. When I click it, I wish a div on another part of the page to be visible in the window by scrolling into view.

A bit like EnsureVisible in other languages.

I've checked out scrollTop and scrollTo but they seem like red herrings.

Can anyone help?

score 410 · Answer 1 · answered Mar 03 '10 at 02:37

410

old question, but if anyone finds this through google (as I did) and who does not want to use anchors or jquery; there's a builtin javascriptfunction to 'jump' to an element;

document.getElementById('youridhere').scrollIntoView();

and what's even better; according to the great compatibility-tables on quirksmode, this is supported by all major browsers!

answered Mar 03 '10 at 02:37

futtta

5,917
2
21
33

2

Not a smooth scroll at all (at least on Firefox) but it works, with one line of code, with no third-party stuff. Nice. – Tyler Aug 12 '10 at 21:57
The problem with built-in scroll into view is that when looking at a long page, user may get lost when you scroll the page. I've written an animated version of this functionality that scrolls the container **only when needed** and does that **with animation** so user can actually see what happened. It can also run a complete function afterwards. It's similar to *scrollTo* jQuery plugin with the exception that you don't have to provide scrollable ancestor. It looks for it automatically. – Robert Koritnik May 02 '11 at 15:37
3

@Robert, that sounds fantastic. Can you provide a link or perhaps provide an answer that includes the code? – Kirk Woll May 29 '11 at 20:05
Doesn't work so well on Chrome for Android when scrolling horizontally. :) – Andres Riofrio Dec 13 '12 at 08:39
Hi futta, I really want to use the built-in function since it will simply be supported by all browsers. But in my case, the div doesn't have ID, so how do you do this?(Can you still do it with only built-in functions?) Thanks in advance! – Franva Feb 06 '14 at 12:32
@Franva You need some way of referencing the element. You can't scroll to an element, if the browser doesn't know which element you want to scroll to ! – Cruncher May 12 '14 at 20:56
a caniuse.com link showing compatibility issues: http://caniuse.com/#feat=scrollintoview – Lukas Liesis Apr 22 '17 at 22:06
12

For people looking for animation or smooth scroll: `document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });` – Khalil Laleh Nov 20 '18 at 09:33
2

I know this is super late but your ID string shouldn't have a # in it, that's jquery syntax. getElementById should just take 'something' and not '#something'. Tripped me up a second ago and I thought I'd mention it for future readers. – Nach0z Jan 06 '22 at 20:16

score 23 · Answer 2 · answered Sep 16 '08 at 02:58

If you don't want to add an extra extension the following code should work with jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

score 22 · Answer 3 · answered Sep 16 '08 at 00:18

22

How about the JQuery ScrollTo - see this sample code

answered Sep 16 '08 at 00:18

George Mauer

117,483
131
382
612

24

Is JQuery not javascript or do we want to write all libraries from scratch? My reading of the question was how to implement a specific feature, perhaps he wanted to know technical details but you don't know that any more than I do. – George Mauer Feb 23 '10 at 16:59
4

@BjornTipling - if he wanted to see the JavaScript here it is http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js – Norman H Aug 10 '12 at 15:20

score 18 · Answer 4 · edited Apr 19 '18 at 09:24

You can use Element.scrollIntoView() method as was mentioned above. If you leave it with no parameters inside you will have an instant ugly scroll. To prevent that you can add this parameter - behavior:"smooth".

Example:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Just replace scroll-here-plz with your div or element on a website. And if you see your element at the bottom of your window or the position is not what you would have expected, play with parameter block: "". You can use block: "start", block: "end" or block: "center".

Remember: Always use parameters inside an object {}.

If you would still have problems, go to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

There is detailed documentation for this method.

for `onclick` dudes `onclick="document.getElementById('scroll-here-plz').scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});"` — user889030, Oct 11 '22 at 05:08

score 15 · Answer 5 · answered Sep 16 '08 at 00:17

15

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

No fancy scrolling but it should take you there.

answered Sep 16 '08 at 00:17

mjallday

9,796
9
51
71

The question asked for javascript to accomplish the same thing. – Scott Swezey Sep 16 '08 at 00:21
3

Check Peter Boughton's answer in http://stackoverflow.com/questions/66964 - giving the div an id instead of using named anchors works the same, but has much better semantic meaning and requires less markup. – nickf Sep 16 '08 at 00:21
as scott s pointed out below: document.location.hash="myAnchor"; – Aaron Watters Oct 23 '09 at 18:56

score 8 · Answer 6 · answered Sep 16 '08 at 01:51

The difficulty with scrolling is that you may not only need to scroll the page to show a div, but you may need to scroll inside scrollable divs on any number of levels as well.

The scrollTop property is a available on any DOM element, including the document body. By setting it, you can control how far down something is scrolled. You can also use clientHeight and scrollHeight properties to see how much scrolling is needed (scrolling is possible when clientHeight (viewport) is less than scrollHeight (the height of the content).

You can also use the offsetTop property to figure out where in the container an element is located.

To build a truly general purpose "scroll into view" routine from scratch, you would need to start at the node you want to expose, make sure it's in the visible portion of it's parent, then repeat the same for the parent, etc, all the way until you reach the top.

One step of this would look something like this (untested code, not checking edge cases):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

score 7 · Answer 7 · answered Dec 20 '16 at 07:31

7

This worked for me

document.getElementById('divElem').scrollIntoView();

answered Dec 20 '16 at 07:31

Xcoder

266
1
5
13

score 5 · Answer 8 · edited May 23 '17 at 11:54

5

Answer posted here - same solution to your problem.

Edit: the JQuery answer is very nice if you want a smooth scroll - I hadn't seen that in action before.

edited May 23 '17 at 11:54

Community

1
1

answered Sep 16 '08 at 00:17

score 4 · Answer 9 · answered Jan 14 '16 at 11:28

4

I can't add a comment to futtta's reply above, but for a smoother scroll use:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

answered Jan 14 '16 at 11:28

funnyfish

133
9

Works perfect in Chrome. Thanks! – Al Belmondo Jan 04 '19 at 15:33

score 4 · Answer 10 · answered Sep 16 '08 at 00:15

4

Why not a named anchor?

answered Sep 16 '08 at 00:15

Mike Becatti

2,052
1
16
32

Heh... i started to post a JavaScript solution, and then read yours... and slapped myself. Nice job! :-) – Shog9 Sep 16 '08 at 00:21

score 4 · Answer 11 · answered Sep 16 '08 at 00:19

4

The property you need is location.hash. For example:

location.hash = 'top'; //would jump to named anchor "top

I don't know how to do the nice scroll animation without the use of dojo or some toolkit like that, but if you just need it to jump to an anchor, location.hash should do it.

(tested on FF3 and Safari 3.1.2)

answered Sep 16 '08 at 00:19

Scott Swezey

2,147
2
18
28

1

Great simple solution... also works with IE6 and IE8 (not tested with IE7) – ckarras Dec 07 '09 at 19:54
2

This is by far the best answer; it's simple, reliable, and requires no library. +1 – Jan 13 '14 at 16:59

score 3 · Answer 12 · answered Dec 21 '21 at 11:04

<button onClick="scrollIntoView()"></button>
<br>
<div id="scroll-to"></div>


function scrollIntoView() {
 document.getElementById('scroll-to').scrollIntoView({
      behavior: 'smooth'
 });
}

The scrollIntoView method accepts scroll-Options to animate the scroll.

With smooth scroll

document.getElementById('scroll-to').scrollIntoView({
          behavior: 'smooth'
 });

No animation

document.getElementById('scroll-to').scrollIntoView();

Nagev · Answer 13 · 2021-11-09T16:20:18.353

As stated already, Element.scrollIntoView() is a good answer. Since the question says "I have a link on a long HTML page..." I want to mention a relevant detail. If this is done through a functional link it may not produce the desired effect of scrolling to the target div. For example:

HTML:

<a id="link1" href="#">Scroll With Link</a>

JavaScript:

const link = document.getElementById("link1");
link.onclick = showBox12;

function showBox12()
{
  const box = document.getElementById("box12");
  box.scrollIntoView();
  console.log("Showing Box:" + box);
}

Clicking on Scroll With Link will show the message on the console, but it would seem to have no effect because the # will bring the page back to the top. Interestingly, if using href="" one might actually see the page scroll to the div and jump back to the top.

One solution is to use the standard JavaScript to properly disable the link:

<a id="link1" href="javascript:void(0);">Scroll With Link</a>

Now it will go to box12 and stay there.

score 1 · Answer 14 · edited Jun 08 '21 at 18:14

There is a jQuery plugin for the general case of scrolling to a DOM element, but if performance is an issue (and when is it not?), I would suggest doing it manually. This involves two steps:

Finding the position of the element you are scrolling to.
Scrolling to that position.

quirksmode gives a good explanation of the mechanism behind the former. Here's my preferred solution:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

It uses casting from null to 0, which isn't proper etiquette in some circles, but I like it :) The second part uses window.scroll. So the rest of the solution is:

function scrollToElement(elem) {
    window.scroll(0, absoluteOffset(elem));
}

Voila!

you forgot to set the first parameter-- window.scroll(0,absoluteOffset(elem)); — Richard, Nov 11 '12 at 06:08

score 1 · Answer 15 · answered Apr 23 '22 at 16:50

1

I use a lightweight javascript plugin that I found works across devices, browsers and operating systems: zenscroll

answered Apr 23 '22 at 16:50

Kay

41
6

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 24 '22 at 01:55
The "read me" on the link I provided to zenscroll explains how to install and use zenscroll, how it offers smooth scrolling, how to scroll to elements and specific locations, how to use it within divs, and how to customize it. – Kay Apr 25 '22 at 02:28

score 0 · Answer 16 · answered Mar 10 '10 at 22:13

I personally found Josh's jQuery-based answer above to be the best I saw, and worked perfectly for my application... of course, I was already using jQuery... I certainly wouldn't have included the whole jQ library just for that one purpose.

Cheers!

EDIT: OK... so mere seconds after posting this, I saw another answer just below mine (not sure if still below me after an edit) that said to use:

document.getElementById('your_element_ID_here').scrollIntoView();

This works perfectly and in so much less code than the jQuery version! I had no idea that there was a built-in function in JS called .scrollIntoView(), but there it is! So, if you want the fancy animation, go jQuery. Quick n' dirty... use this one!

score 0 · Answer 17 · answered Dec 14 '15 at 21:42

For smooth scroll this code is useful

$('a[href*=#scrollToDivId]').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) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

score 0 · Answer 18 · answered Sep 16 '08 at 00:20

scrollTop (IIRC) is where in the document the top of the page is scrolled to. scrollTo scrolls the page so that the top of the page is where you specify.

What you need here is some Javascript manipulated styles. Say if you wanted the div off-screen and scroll in from the right you would set the left attribute of the div to the width of the page and then decrease it by a set amount every few seconds until it is where you want.

This should point you in the right direction.

Additional: I'm sorry, I thought you wanted a separate div to 'pop out' from somewhere (sort of like this site does sometimes), and not move the entire page to a section. Proper use of anchors would achieve that effect.

score -2 · Answer 19 · answered Sep 16 '08 at 06:27

Correct me if I'm wrong but I'm reading the question again and again and still think that Angus McCoteup was asking how to set an element to be position: fixed.

Angus McCoteup, check out http://www.cssplay.co.uk/layouts/fixed.html - if you want your DIV to behave like a menu there, have a look at a CSS there

JavaScript to scroll long page to DIV

19 Answers19

Linked

Related