如何利用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 相关文章推荐
理解JavaScript中的对象 推荐
Jan 09 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
js实现模拟购物商城案例
May 18 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
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
Jquery实现顶部弹出框特效
2015/08/08 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
js实现简单的秒表
2020/01/16 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python如何实现数据的线性拟合
2019/07/19 Python
如何在django中运行scrapy框架
2020/04/22 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
保安自我鉴定范文
2013/12/08 职场文书
党章学习思想汇报
2014/01/14 职场文书
试用期员工考核制度
2014/01/22 职场文书
六一亲子活动总结
2014/07/01 职场文书
升职自荐书
2019/05/09 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python