锚点定位的两种方法，附加一个实现回到顶部功能的例子

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/

 

转载于:https://www.cnblogs.com/vanstrict/p/5652599.html