js实现返回顶部效果


Posted in Javascript onMarch 10, 2017

话不多说,请看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS点击按钮到页面最底部/返回页面顶部代码</title>
<style type="text/css">
 #back-to-top{ position: fixed; bottom: 50px; right: 10%; }
</style>
</head>
<body>
<div style="height: 3000px;"></div>
<div id="back-to-top">
 <a href="#top" rel="external nofollow" >返回顶部</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  //首先将#back-to-top隐藏
  $("#back-to-top").hide();
  //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
  $(function () {
    $(window).scroll(function(){
    if ($(window).scrollTop()>100){
    $("#back-to-top").fadeIn(100);
    }
    else
    {
    $("#back-to-top").fadeOut(100);
    }
    });
    //当点击跳转链接后,回到页面顶部位置
    $("#back-to-top").click(function(){
    $('body,html').animate({scrollTop:0},"speed");
    return false;
    });
    });
    });
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
异步加载script的代码
Jan 12 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Angular实现表单验证功能
Nov 13 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
Vue.directive自定义指令的使用详解
Mar 10 #Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 #Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 #Javascript
微信小程序 页面传值详解
Mar 10 #Javascript
详解Vue生命周期的示例
Mar 10 #Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
django使用多个数据库的方法实例
2021/03/04 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
一道SQL面试题
2012/12/31 面试题
教学副校长工作总结
2015/08/13 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
Django框架中表单的用法
2022/06/10 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android