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


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实现动态增加文件域表单
Feb 12 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
微信小程序实现授权登录
May 15 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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框架的性能
2008/01/10 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
composer.lock文件的作用
2016/02/03 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
nginx 设置多个站跨域
2021/03/09 Servers
JAVASCRIPT对象及属性
2007/02/13 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python字符串详细介绍
2015/05/09 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Django模板Templates使用方法详解
2019/07/19 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
浅谈python出错时traceback的解读
2020/07/15 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
广告语设计及教案
2014/03/21 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
元宵节晚会主持词
2015/07/01 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python