编程 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 相关文章推荐

js的Boolean对象初始值示例

Mar 04 Javascript

jquery实现瀑布流效果分享

Mar 26 Javascript

jquery实现定时自动轮播特效

Dec 10 Javascript

使用Jasmine和Karma对AngularJS页面程序进行测试

Mar 05 Javascript

JQuery导航菜单选择特效

Apr 11 Javascript

JS组件Bootstrap Table布局详解

May 27 Javascript

分分钟玩转Vue.js组件（二）

Mar 01 Javascript

js实现二级导航功能

Mar 03 Javascript

详解JSON Web Token 入门教程

Jul 30 Javascript

JavaScript实现模态对话框实例

Jan 13 Javascript

Vue自定义组件的四种方式示例详解

Feb 28 Javascript

使用Ajax实现无刷新上传文件

Apr 12 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