實現滾動定位的三種方法

時間 2019-11-20

標籤實現滾動定位三種方法欄目系統網絡简体版

原文原文鏈接

Web頁面的定位，據我所知，有三種：1、錨點定位；2、經過js的window.scroll(x,y)或window.scrollTo(x,y)；3、經過js的window.scrollBy(x,y)。javascript

錨點定位，缺點：定位不許確，並且有兼容性問題。前端

因此，大多數狀況下用第二種或第三種方法。java

　注：如下兩種方法的代碼都可以直接使用，不依賴於任何第三方庫或框架。node

下面分析下第二種方法的實現原理：框架

核心：window對象的兩個屬性：scrollTop, offsetTop。curl

看下這兩個屬性的區別：url

該圖片引自：http://blog.csdn.net/fswan/article/details/17238933spa

scrollTop: 對象的最頂部到對象在當前窗口顯示的侷限內的頂邊的間隔（對象被捲去的高度）。.net

document.body.scrollTop：網頁被捲去的高。code

offsetTop：當前對象到其上級層頂部的間隔。

/* 此段代碼是從NEJ框架的源碼中抽取出來，並通過稍加修改獲得的 */

/*注： NEJ框架是網易公司的前端基礎框架，做者：蔡劍飛，網易前端資深工程師，網易前端專家委員會主任*/

_$offset = (function(){
        var _isRoot = function(_element){
            return _element==document.body||
                   _element==document.documentElement;
        };
        return function(_from,_to){
            _from = document.getElementById(_from);
            if (!_from){
                return null;
            }
            _to = document.getElementById (_to)||null;
            var _node = _from,
                _result = {x:0,y:0},
                _isroot,_delta,_border;

            _$getStyle = function(_element,_name){
                _element = _p._$get(_element);
                return !_element ? '' :
                    _h.__getStyleValue(
                        _element,_name
                    );
            };
            while(!!_node&&_node!=_to){
                _isroot = _isRoot(_node)||_node==_from;
                _delta = _isroot?0:_node.scrollLeft;
                _border = parseInt(_p._$getStyle(_node,'borderLeftWidth'))||0;
                _result.x += _node.offsetLeft+_border-_delta;
                _delta = _isroot?0:_node.scrollTop;
                _border = parseInt(_p._$getStyle(_node,'borderTopWidth'))||0;
                _result.y += _node.offsetTop+_border-_delta;
                _node = _node.offsetParent;
            }
            return _result;
        };
    })();

第三種方法：

代碼

/* 此段代碼是我同窗從網上找來的，若是做者看到這篇文章，請聯繫我，我會把做者的博客地址加在這裏。 */

function elementPosition(obj) {
      var curleft = 0, curtop = 0;

      if (obj.offsetParent) {
          curleft = obj.offsetLeft;
          curtop = obj.offsetTop;

          while (obj = obj.offsetParent) {
              curleft += obj.offsetLeft;
              curtop += obj.offsetTop;
          }
      }

      return { x: curleft, y: curtop };
  }

  function ScrollToControl(id){
      var elem =  document.getElementById(id);
      var scrollPos = elementPosition(elem).y;
      scrollPos = scrollPos - document.documentElement.scrollTop;
      var remainder = scrollPos % 50;
      var repeatTimes = (scrollPos - remainder) / 50;
      ScrollSmoothly(scrollPos,repeatTimes);
      window.scrollBy(0,remainder);
  }

  var repeatCount = 0;
  var cTimeout;
  var timeoutIntervals = new Array();
  var timeoutIntervalSpeed;

  function ScrollSmoothly(scrollPos,repeatTimes){
      if(repeatCount < repeatTimes){
        window.scrollBy(0,50);
      }
      else{
        repeatCount = 0;
        clearTimeout(cTimeout);
      return;
      }

      repeatCount++;
      cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','"+ repeatTimes +"')",25);
  }

ps: 運行 window.scroll(0,0); 便可實現返回頁首的功能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。