首页 > 软件开发 > JQUERY >

利用JQuery, 平滑返回页面顶端,(TOP功能)

来源:互联网 2023-03-16 23:54:15 258

利用JQuery插件, 当网页页面很长,下拉到下面时,平滑返回到页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

工具/原料

  • Jquery脚本库
  • Jquery插件(backTop)

方法/步骤

  • 1

    首先引用Jquery脚本库,和 返回顶端的Jquery插件backTopdco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 2

    TOP按钮样式,主要是CSS位置等,固定在页面右边。dco办公区 - 实用经验教程分享!

    实际应用中,可以用背景图等再美化一下按钮。dco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 3

    对应HTML代码,dco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 4

    加上对应JS脚本,绑定按钮事件,当TOP按钮点击时,触发返回页面顶部,dco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 5

    插件本身附带实用功能,当页面没有下拉太多时,TOP按钮是不可见的,如图,dco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 5该信息未经许可获取自百度经验
  • 6

    当下拉了页面到一定距离时,TOP按钮才显示出来,当然这个距离是可以自己设定的。dco办公区 - 实用经验教程分享!

    利用JQuery, 平滑返回页面顶端,(TOP功能)dco办公区 - 实用经验教程分享!

  • 注意事项

    • 要记得引入Jquery脚本库。
    • Jquery TOP插件脚本要写在Jquery脚本库后面,顺序不可反。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!dco办公区 - 实用经验教程分享!


    标签: HTMLJAVASCRIPTJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码