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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
vue实例的选项总结
Jun 09 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
php简单的上传类分享
2016/05/15 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python连接phoenix的方法示例
2017/09/29 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
婚庆主持词大全
2015/06/30 职场文书
礼貌问候语大全
2015/11/10 职场文书
外出听课学习心得体会
2016/01/15 职场文书
python常见的占位符总结及用法
2021/07/02 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技