如何利用JQuery实现从底部回到顶部的功能


Posted in Javascript onDecember 27, 2016

今天给大家介绍一下如何利用jQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。废话不多说,下面就给出这么一个例子介绍一下,它是怎么实现的。

实现方法一:

<footer>
  <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
  <div id="tbox">
    <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
      <img src="images/weixing-ma.jpg">
    </div>
    <div style="float:right;"><a id="togbook" href="#顶部的一个ID"></a></div>
    <div style="float:left"><a id="gotop"></a></div>
  </div>
</footer>

这第一个方法比较简单,就是在超链接中写上“#顶部的ID”就可以实现回到顶部的功能了,不过如果是这种方法的话就不会出现那种滑动的效果,交互性不太好。

下面在介绍一种可以实现滑动的回到顶部功能,并且可以自己设置滑动的速度和回到顶部的位置等。推荐大家用这种模式实现回到顶部的功能,下面来实现的例子。

实现方法二:

<footer>
  <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
  <div id="tbox">
    <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
      <img src="images/weixing-ma.jpg">
    </div>
    <div style="float:right;"><a id="togbook" href="#"></a></div>
    <div style="float:left"><a id="gotop"></a></div>
  </div>
</footer>
<script type="text/javascript">
  $("#gotop").click(function () {
    var speed=200;//滑动的速度
    $('body,html').animate({ scrollTop: 0 }, speed);
    return false;
  });
</script>

通过写一段js代码就可以实现回到顶部的功能了,是不是特别简单啊。

以上所述是小编给大家介绍的如何利用JQuery实现从底部回到顶部的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
详解js的六大数据类型
Dec 27 #Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 #Javascript
谈谈第三方App接入微信登录 解读
Dec 27 #Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 #Javascript
修改ligerui 默认确认按钮的方法
Dec 27 #Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 #Javascript
浅谈Vue的基本应用
Dec 27 #Javascript
You might like
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Django的models模型的具体使用
2019/07/15 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
什么是GWT的Module
2013/01/20 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
九年级数学教学反思
2016/02/17 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
Python 中 Shutil 模块详情
2021/11/11 Python