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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python匹配中文的正则表达式
2016/05/11 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python绘制热力图heatmap
2020/03/23 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
常务副总经理任命书
2014/06/05 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
写给女朋友的保证书
2015/05/09 职场文书
党支部考察意见范文
2015/06/02 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
关于python类SortedList详解
2021/09/04 Python