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/

    个人能力有限(* *),欢迎指正、交流。
  • 相关阅读:
    CentOS7 安装Redis Cluster集群
    CentOS7 安装Redis 单机版
    CentOS7 配置免密登陆
    深入java虚拟机学习 -- 内存管理机制
    深入java虚拟机学习 -- 类的卸载
    深入java虚拟机学习 -- 类的加载机制(四)
    深入java虚拟机学习 -- 类的加载机制(三)
    深入java虚拟机学习 -- 类的加载机制(续)
    (原创)cocos lua 热更新从零开始(一)最简单demo
    lua 调用参数报错(a userdata value)
  • 原文地址:https://www.cnblogs.com/vanstrict/p/5652599.html
Copyright © 2011-2022 走看看