如何利用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
详解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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Python中的闭包总结
2014/09/18 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
基于Python函数和变量名解析
2019/07/19 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
党组织结对共建协议书
2016/03/23 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书