编程 Javascript

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>

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

js实现返回顶部效果

- Author -

sosojie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Windows Live的@live.com域名注册漏洞利用代码

Dec 27 Javascript

利用404错误页面实现UrlRewrite的实现代码

Aug 20 Javascript

IE浏览器IFrame对象内存不释放问题解决方法

Aug 22 Javascript

node.js实现爬虫教程

Aug 25 Javascript

深入理解MVC中的时间js格式化

May 19 Javascript

关于JSON与JSONP简单总结

Aug 16 Javascript

Vue中定义全局变量与常量的各种方式详解

Aug 23 Javascript

详解Angular5路由传值方式及其相关问题

Apr 28 Javascript

微信小程序WebSocket实现聊天对话功能

Jul 06 Javascript

vue计算属性get和set用法示例

Feb 08 Javascript

关于JavaScript 中 if包含逗号表达式

Nov 27 Javascript

React自定义hook的方法

Jun 25 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