zoukankan      html  css  js  c++  java
  • 给锚点a标签添加滑动效果

    a标签是前端必用之一,但是a标签点击后马上跳到了href属性值处,有时候要达到滑动效果就要自己添加JavaScript

    普通的a标签代码写好之后,在js脚本内加上

    $("a").click(function () {

        $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

        return false;//不要这句会有点卡顿

    });

    (注意:$表达式需要引用jQuery的js文件才能生效!!!!)

    其中offset() 方法返回或设置匹配元素的left或者top的页面偏移量(getBoundingClientRect()放回当前窗口的偏移量),具体用法可以到W3School或菜鸟教程看看;

    $(this).attr("href")是获取你所点击的a标签里面的href属性值。

    $($(this).attr("href")).offset().top 是获取id等于$(this).attr("href")块所在的位置,比如点击<a href="a1">时,就会获取到id="a1" 的块的位置,这里的-20只是让滑动到的块下移20px,使其更加靠近屏幕中间,让a标签跟加好用。

    scrollTop是滑动动作,比如scrollTop: 50px 就是滑动到html距离顶部的50px高处。

    animate是动作函数,提供scrollTop等动作,500则是指animate所提供的动作在500毫秒内完成,这里就是指滑动0.5秒。

    $("a").click(function (){ })指a标签被点击是触发{ } 内的事件,所以也可以把a标签改成自定义标签,然后就可以实现一个页面既有普通a标签,也有可以滑动的标签。

    转载自:https://blog.csdn.net/never_tears/article/details/53377123

  • 相关阅读:
    Laravel 服务容器、服务提供器、契约实例讲解
    通过event记录sql
    laravel log改为时间格式
    array_column函数
    linux 安装ssh以及ssh用法与免密登录
    scp复制文件到远程服务器上
    nginx配置ssl证书后无法访问https
    Mac 在terminal 上用命令打开sublime
    Mac上通过iterm 上传文件到服务器
    基于visual Studio2013解决算法导论之044最短路径
  • 原文地址:https://www.cnblogs.com/lhj-blog/p/9608671.html
Copyright © 2011-2022 走看看