Scrolling an Element into View - J Query

Problem
You want to scroll the document or an element to bring another element into view.

Solution: Scrolling the Whole Window

If you need to scroll the whole window, you’ll use the offset method to determine the location of the destination element relative to the document and then use the scroll Top method to scroll the document to bring the element into view.
For example, let’s say you want to scroll to the #foo element when the user clicks the#bar element:

Solution: Scrolling Inside an Element

If your destination element is inside a scrolling container, you’ll use the position method to determine the location of the destination element relative to the container, addit to the current scroll position of the container, and then use the scrollTop method to scroll the container to bring the element into view. Note that the scrolling container must be positioned—using position: relative, position: absolute, or position:fixed—in order for this to work.
For example, consider the following markup, styled so that #foo is not large enough to show both paragraphs at once.

Scrolling #foo to show the last paragraph is simple:

In both of these examples, the scrolling happens instantaneously—efficient, but not necessarily attractive. The animate method will animate an element’s scrollTop property,so animating the transition is trivial. Here’s how we would do it for the scrollingcontainer:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics