简单几步实现返回顶部效果


Posted in Javascript onDecember 05, 2016

今天与大家分享下网页中经常出现的返回顶部效果

相比原生Javascript,jquery实现起来能够省略不少代码。

接下来就直接贴代码啦:

$(function(){
    $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
        var wHeight=$(window).height(); //获取浏览器可视窗口高度
        var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
        if(wTop>=wHeight) //当滚动条距离顶部高度超过一屏时执行
        {
           $("#btn").show(); //返回顶部按钮显示
        }
        else{
           $("#btn").hide(); //返回顶部按钮隐藏
        }
      });
      $("#btn").click(function(){
          $("html,body").animate({scrollTop:0},500); //页面500毫秒返回顶部
      });
 });

 ok,是不是很简单,jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。

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

Javascript 相关文章推荐
用循环或if语句从json中取数据示例
Aug 18 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
Vue中props的详解
May 16 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 #Javascript
jquery删除数组中重复元素
Dec 05 #Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 #Javascript
DOM 事件的深入浅出(二)
Dec 05 #Javascript
vue.js指令v-model实现方法
Dec 05 #Javascript
DOM 事件的深入浅出(一)
Dec 05 #Javascript
使用微信小程序开发前端【快速入门】
Dec 05 #Javascript
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
美国网上订购鲜花:FTD
2016/09/23 全球购物
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
查环查孕证明
2014/01/10 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
学生手册家长评语
2014/02/10 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
法制工作总结2015
2015/07/23 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Feign调用传输文件异常的解决
2021/06/24 Java/Android