如何利用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据option的value值快速设定初始的selected选项
Aug 13 Javascript
常用的javascript function代码
May 23 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript中的this妙用实例分析
May 09 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
global.php
2006/12/09 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
详解Python中的条件判断语句
2015/05/14 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python网络应用开发知识点浅析
2019/05/28 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
自主招生自荐信指南
2014/02/04 职场文书
公证书标准格式
2014/04/10 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
大明湖导游词
2015/02/03 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android