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


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 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
javascript模拟命名空间
Apr 17 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 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中urlencode与rawurlencode的区别
2016/09/05 PHP
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
详解webpack模块化管理和打包工具
2018/04/21 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python饼状图的绘制实例
2019/01/15 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python matlab库简单用法讲解
2020/12/31 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
刊首寄语大全
2014/04/11 职场文书
自主招生推荐信范文
2014/05/10 职场文书
教师考核材料
2014/05/21 职场文书
家长学校教学计划
2015/01/19 职场文书
客房服务员岗位职责
2015/02/09 职场文书
会计工作态度自我评价
2015/03/06 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
党员转正党支部意见
2015/06/02 职场文书