zoukankan      html  css  js  c++  java
  • 锚点定位的两种方法,附加一个实现回到顶部功能的例子

    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/

    个人能力有限(* *),欢迎指正、交流。
  • 相关阅读:
    浏览器兼容性优化
    js操作table(增加行,删除行,上移,下移,复制行)
    褚时健传读后感
    新鞋
    八达岭奥莱
    springMVC 多方法controller
    springMVC入门配置及helloworld实例
    springMVC源码下载地址
    spring3mvc与struts2比较
    hql语句拼接的替换方式
  • 原文地址:https://www.cnblogs.com/vanstrict/p/5652599.html
Copyright © 2011-2022 走看看