如何利用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 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
详解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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python实现划词翻译
2020/04/23 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
python中logging库的使用总结
2017/10/18 Python
python递归全排列实现方法
2018/08/18 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
django解决跨域请求的问题
2018/11/11 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python脚本开机自启的实现方法
2019/06/28 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
精选奢华:THE LIST
2019/09/05 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
环保公益广告语
2014/03/13 职场文书
教学改革实施方案
2014/03/31 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
佛光寺导游词
2015/02/10 职场文书
消费者投诉书范文
2015/07/02 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA