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/

    个人能力有限(* *),欢迎指正、交流。
  • 相关阅读:
    002: Opencv 4.0代码执行
    Opencv4.0+cmake3.13.3+vs2017源码编译
    ubuntu 18.0Lts +YouCompleteMe插件安装
    pip 安装keras
    pip 安装paddle
    pip 安装 tensorboardX
    pip 安装pytorch 命令
    TT信息-4-Spring Boot/Spring Cloud
    TT信息-3-Spring/Spring MVC
    TT信息-2设计模式
  • 原文地址:https://www.cnblogs.com/vanstrict/p/5652599.html
Copyright © 2011-2022 走看看