JS实现带动画的回到顶部效果


Posted in Javascript onDecember 28, 2017

本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下

实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。
代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可。

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>实现回到顶部功能</title> 
  </head> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
     
    .gotop { 
      display: none; 
      position: fixed; 
      bottom: 50px; 
      right: 50px; 
      width: 40px; 
      height: 40px; 
      padding: 5px; 
      background-color: #F00; 
      color: #FFF; 
      text-align: center; 
      cursor: pointer; 
    } 
  </style> 
  <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
 
  <body> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 
    <div id="goTop" class="gotop"> 
      <p>回到</p> 
      <p>顶部</p> 
    </div> 
  </body> 
  <script> 
    function goTop() { 
 
      $(window).scroll(function() { 
        var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器 
        if($scrollTop > 100) { //滚动高度可调 
          $("#goTop").show(); 
        } else { 
          $("#goTop").hide(); 
        }; 
      }) 
 
      $("#goTop").on("click", function() { 
        $("body").stop().animate({ 
          scrollTop: 0 
        }); 
      }) 
 
    } 
 
    goTop(); 
  </script> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 #Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 #Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 #Javascript
vue获取dom元素注意事项
Dec 28 #Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 #Javascript
webpack搭建vue 项目的步骤
Dec 27 #Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 #Javascript
You might like
smarty内置函数section的用法
2015/01/22 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
React diff算法的实现示例
2018/04/20 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
什么是GWT的Module
2013/01/20 面试题
外贸业务员求职信范文
2013/12/12 职场文书
给朋友的道歉信
2014/01/09 职场文书
大学四年个人自我小结
2014/03/05 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Golang中channel的原理解读(推荐)
2021/10/16 Golang