Scroll the page so that the item is visible.

Question

I just tried the prototype scrollTo and, as the documentation says, it

Scrolls the window so that the item appears at the top of the viewport

I need a function that

• only scrolls if the item is not fully visible in the viewport
• scrolls so that the item is in the center of the viewport.

Does anyone know of such a feature in a prototype, script, or standalone?

Answer 1

I think you need something like this ( demo ) :

window.height

function getWindowHeight() { var body = document.body; var docEl = document.documentElement; return window.innerHeight || (docEl && docEl.clientHeight) || (body && body.clientHeight) || 0; } 

Scroll

 function scrollElemToCenter(id, duration) { var el = document.getElementById(id); var winHeight = getWindowHeight(); var offsetTop = el.offsetTop; if (offsetTop > winHeight) { var y = offsetTop - (winHeight-el.offsetHeight)/2; // wo animation: scrollTo(0, y); scrollToAnim(y, duration); } } 

Animation (optional, you can use script.aculo.us, etc.)

 function interpolate(source,target,pos) { return (source+(target-source)*pos); } function easing(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; } function scrollToAnim(targetTop, duration) { duration || (duration = 1000); var start = +new Date, finish = start + duration, startTop = getScrollRoot().scrollTop, interval = setInterval(function(){ var now = +new Date, pos = (now>finish) ? 1 : (now-start)/duration; var y = interpolate(startTop, targetTop, easing(pos)) >> 0; window.scrollTo(0, y); if(now > finish) { clearInterval(interval); } }, 10); } 

get scroll root

 var getScrollRoot = (function() { var SCROLL_ROOT; return function() { if (!SCROLL_ROOT) { var bodyScrollTop = document.body.scrollTop; var docElScrollTop = document.documentElement.scrollTop; window.scrollBy(0, 1); if (document.body.scrollTop != bodyScrollTop) (SCROLL_ROOT = document.body); else (SCROLL_ROOT = document.documentElement); window.scrollBy(0, -1); } return SCROLL_ROOT; }; })(); 

Answer 2

Here is an alternative approach that uses some of the prototypes of the built-in functions to work with the viewport and scroll sizes ...

 function scrollToCenterOfElement(id){ // Cache element and property lookups... var element = $(id); var height = element.measure('height'); var top = element.cumulativeOffset().top; var scroll = document.viewport.getScrollOffsets(); var dimensions = document.viewport.getDimensions(); // Checks to see if the top offset plus the height of the element is greater // than the sum of the viewport height and vertical scroll offset, which means // that the element has yet to be fully scrolled in to view, or if the // top offset is smaller than the vertical scroll offset, which means the element // has already been (at least partly) scrolled out of view.. if ((top + height > dimensions.height + scroll.top) || (top < dimensions.height + scroll.top)) { // Scroll window to sum of top offset plus half the height of the element // minus half of the viewport height, thus centering the element vertically. window.scrollTo(0, top + (height / 2) - (dimensions.height / 2)); } } scrollToCenterOfElement('my-element'); 

Answer 3

My solution does not cover 100% of what is being requested, but maybe someone finds it useful.

 /** * Scroll container so that given element becomes visible. Features: * <ol> * <li>If element is already visible, then no action is taken. * <li>If element is above view port, the viewport is scrolled upwards so that element becomes visible at the top. * <li>If element is below view port, the viewport is scrolled downwards so that element becomes visible at the bottom. * </ol> * * @param element * optional string (selector) or jQuery object that controls the scrolling of the element * @param options * optional extra settings * @param options.animationSpeed * if defined, then scrolling is animated; determines time in milliseconds after which the element should * be scrolled into viewport * @param options.heightScale * double number from 0 to 1; when scrolling the element from bottom sometimes it is desirable to scroll * element close to the top; eg to scroll it to the center specify 0.5; to scroll it to the top specify 0 * @param options.complete * function to be called after animation is completed; if there is no animation, the function is called straight away */ $.fn.scrollTo = function(element, options) { options = options || {}; var elementTop = element.offset().top; var containerTop = this.offset().top; var newScrollTop = null; if (elementTop < containerTop) { // Scroll to the top: newScrollTop = Math.round(this.scrollTop() + elementTop - containerTop); } else { // Scroll to the bottom: var elementBottom = elementTop + element.outerHeight(true); var containerHeight = this.height(); if (elementBottom > containerTop + containerHeight) { if (options.heightScale != null) { if (options.heightScale === 0) { // This will effectively turn the formulae below into "elementTop - containerTop": containerHeight = element.outerHeight(true); } else { containerHeight *= options.heightScale; } } newScrollTop = Math.round(this.scrollTop() + elementBottom - containerTop - containerHeight); } } if (newScrollTop !== null) { if (options && options.animationSpeed) { this.animate({ scrollTop : newScrollTop }, { "duration" : options.animationSpeed, "complete" : options.complete }); } else { this.scrollTop(newScrollTop); if ($.isFunction(options.complete)) { options.complete(); } } } else { if ($.isFunction(options.complete)) { options.complete(); } } return this; }; 

Demo