How to scroll to an element inside a div?
You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;
The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).
Now we tell the div to scroll to that position using scrollTop
:
document.getElementById('scrolling_div').scrollTop = topPos;
If you're using the prototype JS framework, you'd do the same thing like this:
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).
Scroll back to the top of scrollable div
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;
See the scrollTop
attribute.
scrollTo a specific div on long scrolling page when page loads
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/
Scroll Automatically to the Bottom of the Page
jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:
window.scrollTo(0, document.body.scrollHeight);
Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it's scroll height instead.
window.scrollTo(0, document.querySelector(".scrollingContainer").scrollHeight);
You can tie that to the onclick
event of your question (i.e. <div onclick="ScrollToBottom()" ...
).
Some additional sources you can take a look at:
- http://www.alecjacobson.com/weblog/?p=753
- http://www.mediacollege.com/internet/javascript/page/scroll.html
- http://www.electrictoolbox.com/jquery-scroll-bottom/
Scroll to bottom of div?
Here's what I use on my site:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
scroll to the bottom of the content if some content has been added to the `div`
If you use
msgdiv.scrollIntoView(false);
it will keep the scroll view at the bottom of the element. (true would keep it at the top.)
Related Topics
Where Should I Put the CSS and JavaScript Code in an HTML Webpage
Performance Differences Between Visibility:Hidden and Display:None
How to Check If Geolocation Has Been Declined with JavaScript
Passing Variables Through Handlebars Partial
Check Ctrl/Shift/Alt Keys on 'Click' Event
Generic Way to Detect If HTML Form Is Edited
JavaScript Get X and Y Coordinates on Mouse Click
How to Auto-Scroll to End of Div When Data Is Added
Reading Cookie Expiration Date
Which Is Better: <Script Type="Text/Javascript">...</Script> or <Script>...</Script>
Trigger CSS Animations in JavaScript
How Send a Form with JavaScript When Input Name Is "Submit"
Open Ie Browser in Firefox/Chrome Page
HTML Anchor Link - Href and Onclick Both