Javascript Scrollto Method Does Nothing

JavaScript scrollTo method does nothing?

I was able to resolve this problem using jQuery method animate(). Here is an example of the implementation I went with:

$('#content').animate({ scrollTop: elementOffset }, 200);

The selector is getting the div with ID = "content". I am then applying the animate method on it with scrollTop as an option. The second parameter is the time in milliseconds for the animation duration. I hope this helps someone else.

scrollTo not works at ALL?

You can't scroll window because it's not a DOM element it's an object. If you want to scroll the whole page, do something like this:

$('body').scrollTo(10, 10);

Hope, that works.

Scroll to pure javascript not working

You musst change the element.scrollTop of the element you want to scroll on, in this case document.body. You are only doing this in the first call. After that you´re always scrolling on the list item which is your target (what has no effect, since it has no overflow).
You should call your scrollTop like this:

scrollTo(document.body, to.offsetTop, 250);

Maybe you should also take a look at

window.scrollTo()

https://developer.mozilla.org/en/docs/Web/API/Window/scrollTo

JavaScript issue with scrollTo() in Chrome

Chrome is so fast that your scrollTo() action fires before Chrome's default scroll to html anchor event.

Give it a tiny delay by using

setTimeout(function() {window.scrollTo(0, y);},1)

---

Or simply avoid using the actual element id as hash name

instead of using

test.htm#6

use

test.htm#link_6

then you can get the real id by doing something like

window.location.hash.split('_')[1]

Hope it helps.

document.scrollTo does not work when running

scrollTo is a function on window, not document.

<h3>
Need a Lift? <a href="javascript:window.scrollTo(5, 5)" >Click Here.</a>
</h3>

Coudn't scroll to end of the page using window.scrollTo

After lot of trial and error adding following css fixed the issue, I don't why this fixed it?

body {
    overflow: hidden !important;
}

This means that some of your children elements bled out of its parent container. overflow: hidden tells the browser to cut out the parts that are not fitting inside the body container. That also means that this issue can be solved by changing the size or positioning of the body's children, and that would probably be a better approach to fixing the issue.

By default, overflow is set to visible, and therefore the browser allows you to see (and to scroll) outside of the containing box (overflow property explained)

The !important part tells the browser to artificially increase the specificity of this rule. For more details on specificity: css-tricks/sprecificity

---

Related Topics