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


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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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 判断常量,变量和函数是否存在
2009/04/26 PHP
smarty缓存用法分析
2014/12/16 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
python中尾递归用法实例详解
2015/04/28 Python
Python中functools模块函数解析
2017/03/12 Python
Python tkinter事件高级用法实例
2018/01/31 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Pygame的程序开始示例代码
2020/05/07 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
《美丽的小路》教学反思
2014/02/26 职场文书
学术会议主持词
2014/03/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
出租房屋协议书
2014/09/14 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
师德标兵事迹材料
2014/12/19 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js