Javascript 滚动页面，使元素可见

我刚刚尝试了prototype的功能，正如文档所述，它

滚动窗口，使元素 显示在视口的顶部

我想要一个函数

仅当元素在视口中不完全可见时才会滚动

滚动以使元素显示在视口的中心

---

有人知道prototype、scriptaculous或单机版中有这样的函数吗？

我想您需要这样的函数（）：

窗口高度

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

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;
  };
})();

滚动

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);
  }
}

动画（可选，您可以使用script.aculo.us等）

获取滚动根目录

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

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;
  };
})();

---

这里是另一种方法，它使用Prototype的一些内置功能来处理视口和滚动尺寸

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');

function滚动到电子元件（id）{
//缓存元素和属性查找。。。
var元素=$（id）；
变量高度=元素。度量（“高度”）；
var top=element.cumulativeOffset（）.top；
var scroll=document.viewport.getScrollOffsets（）；
var dimensions=document.viewport.getDimensions（）；
//检查顶部偏移加上图元高度是否更大
//而不是视口高度和垂直滚动偏移的总和，这意味着
//元素尚未完全滚动到视图中，或者
//顶部偏移小于垂直滚动偏移，这意味着元素
//已经（至少部分）从视图中滚出。。
如果（（顶部+高度>尺寸.高度+滚动.顶部）| |（顶部<尺寸.高度+滚动.顶部））{
//滚动窗口至顶部偏移加上元素高度一半的总和
//减去视口高度的一半，从而使元素垂直居中。
滚动到（0，顶部+（高度/2）-（dimensions.height/2））；
}
}
ScrollToCenterFelement（“我的元素”）；

我的解决方案并没有覆盖所请求的全部内容，但可能有人发现它很有用

/**
 * 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; e.g. 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;
};

/**
*滚动容器，使给定元素可见。特征：
* 
*
如果元素已可见，则不执行任何操作。
*
如果元素位于视口上方，则视口将向上滚动，以便元素在顶部可见。
*
如果元素位于视口下方，视口将向下滚动，以便元素在底部可见。
* 
*
*@param元素
*控制元素滚动的可选字符串（选择器）或jQuery对象
*@param选项
*可选的额外设置
*@param options.animationSpeed
*如果已定义，则滚动将设置动画；以毫秒为单位确定元素应在该时间之后
*被滚动到视口中
*@param options.heightScale
*从0到1的双倍数字；从底部滚动元素时，有时需要滚动
*靠近顶部的元素；e、 g.要将其滚动到中心，请指定0.5；要将其滚动到顶部，请指定0
*@param options.complete
*动画完成后调用的函数；如果没有动画，则直接调用该函数
*/
$.fn.scrollTo=函数（元素、选项）{
选项=选项| |{}；
var elementTop=element.offset（）.top；
var containerTop=this.offset（）.top；
var newscorltop=null；
if（元素顶部<容器顶部）{
//滚动至顶部：
newScrollTop=Math.round（this.scrollTop（）+elementTop-containerTop）；
}否则{
//滚动至底部：
var elementBottom=elementTop+element.outerHeight（true）；
var containerHeight=this.height（）；
如果（元素底部>容器顶部+容器高度）{
如果（options.heightScale！=null）{
如果（options.heightScale==0）{
//这将有效地将以下公式转换为“elementTop-containerTop”：
containerHeight=元素的外部亮度（true）；
}否则{
容器高度*=options.heightScale；
}
}
newScrollTop=Math.round（this.scrollTop（）+elementBottom-containerTop-containerHeight）；
}
}
if（newScrollTop！==null）{
if（选项和选项.动画速度）{
这是动画({
滚动顶端：新闻滚动顶端
}, {
“持续时间”：options.animationSpeed，
“完成”：options.complete
});
}否则{
这个.scrollTop（newScrollTop）；
if（$.isFunction（options.complete））{
options.complete（）；
}
}
}否则{
if（$.isFunction（options.complete））{
options.complete（）；
}
}
归还这个；
};

---

谢谢，这很好，但是我认为它没有考虑文档的当前滚动位置，即如果您位于页面底部，它将不会向上滚动…是的，没错。实际上，代码考虑了它，但它不是跨浏览器的。因为

document.body

并不总是滚动根元素。为此添加了一个测试函数，并更新了测试页面（在

#框

下面有一个链接）。我的行--var height=element.measure（'height'）；--我将其更改为--var height=element.getHeight（）；现在它工作了！感谢您，这与和有多大关系。