錨點定位的兩種方法，附加一個實現回到頂部功能的例子

1、html中直接使用設置錨點，即將a標簽的herf設成要定位到的位置上的元素的id。

    示例如下：

    定位到div id="pos",則給一個a標簽

<a href="#pos"></a>

 

 

2、使用js定位，這種方法比較靈活，而且可以制造出一些滾動效果

    下面是一個使用greensock個TweenMax實現平滑滾動到指定位置的示例：

    html:

<a class="begin"></a>
<div class="end"></a>

   js:

var scrollElement = function(from,to){
    var posEnd = to.offset().top;
    var posBng = from.offset().top;
    var time = Math.abs(parseFloat(posEnd - posBng))/800;
    time = time < .5 ? .5 : time;
    time = time > 1 ? 1 : time;
    TweenMax.to($('html,body'), time, {scrollTop:posEnd,ease:Sine.easeInOut}); 

  };

  srcollElement($(".begin"),$(".end"));

補充一個回到頂部功能的例子：

html:

<a class="backTop" href="#"></a>

js部分:

 (function(){
       var $top = $(".backTop");
       $top.click(function(){
            var posBng = $top.offset().top;
            var posEnd = $("body").offset().top;
            var time = Math.abs(parseFloat(posEnd - posBng))/2000;
            time = time < .5 ? .5 : time;
            time = time > 1 ? 1: time;
            TweenMax.to($("html,body"), time,{scrollTop:posEnd,ease:Sine.easeInOut});});     
    })();

另外，滾動效果jquery也含有一款插件包含scrollTo方法，$.scrollTo帶有兩個參數，第一個是指定要滾動的目的ID，第二個參數是滾動時間間隔，以毫秒為單位。

需要准備准備jQuery庫和scrollTo.js插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

官網例子  http://demos.flesler.com/jquery/scrollTo/