文档章节

jquery制作返回顶部按钮 教程

史文帝
 史文帝
发布于 2017/01/07 18:56
字数 417
阅读 9
收藏 0

在浏览一些网站时,我们经常可以看到各种各样的返回顶部按钮。所谓的返回顶部按钮,是指用户向下滚动页面一段距离之后,点击这个按钮可以快速的返回到页面的顶部。

对于一些内容很多的页面,为用户提供一个返回顶部按钮是非常必要的。网上有非常多返回顶部的jquery插件。我们也可以自己编写一个简单的返回顶部按钮。实现返回顶部功能的jquery代码非常简单,只需要10几行代码就可以实现了。来看具体的实现代码。

首先在页面初始化时将返回顶部按钮隐藏。

var $backToTop = $(".back-to-top");

/* 隐藏回顶部按钮 */

$backToTop.hide();

然后我们需要在用户向下滚动页面一段距离(例如100像素)之后,将按钮淡入淡出的显示出来,如果按钮距离页面顶部小于100像素,则又将它隐藏起来。

$(window).on('scroll', function() {

  if ($(this).scrollTop() > 100) { /* 返回顶部按钮将在用户向下滚动100像素后出现 */

  $backToTop.fadeIn();

  } else {

  $backToTop.fadeOut();

  }

});

最后,为按钮绑定点击事件,在按钮被点击时,使用animate()方法将页面滚动会顶部。

$backToTop.on('click', function(e) {

  $("html, body").animate({scrollTop: 0}, 500);

});

完整的返回页面顶部的jquery代码如下:

$(document).ready(function(){

  var $backToTop = $(".back-to-top");

  /* 隐藏回顶部按钮 */

  $backToTop.hide();

 

  $(window).on('scroll', function() {

   if ($(this).scrollTop() > 100) { /* 返回顶部按钮将在用户向下滚动100像素后出现 */

   $backToTop.fadeIn();

   } else {

   $backToTop.fadeOut();

   }

  });

 

  $backToTop.on('click', function(e) {

   $("html, body").animate({scrollTop: 0}, 500);

  });

})

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
940
3
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
16 个新鲜的 CSS3 在线教程

用CSS3制作令人印象深刻的产品展示 使用jQuery和CSS3制作闪亮的旋钮控制 使用 CoffeeScript 创建一个类 iOS 的界面 使用 CSS3 制作报纸阅读 制作一个 CSS3 动画菜单 使用 jQuery 和 CSS3 制作...

红薯
2012/04/29
6.1K
4
33 超棒的 jQuery 教程【图文并茂】

在这篇文章中,我们为您收集了一些非常有用的,而且效果很好的 jQuery 实际开发教程。 1. 使用 jQuery 构建一个可滑动的产品幻灯展示 2. 使用 PHP、jQuery 和 CSS3 实现的相片展位 3. 使用 ...

红薯
2011/06/23
14.5K
9

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot引入第三方jar包或本地jar包的处理方式

在开发过程中有时会用到maven仓库里没有的jar包或者本地的jar包,这时没办法通过pom直接引入,那么该怎么解决呢 一般有两种方法 - 第一种是将本地jar包安装在本地maven库 - 第二种是将本地j...

独钓渔
今天
2
0
五、MyBatis缓存

一、MyBatis缓存介绍 缓存的使用可以明显的加快访问数据速度,提升程序处理性能,生活和工作中,使用缓存的地方很多。在开发过程中,从前端-->后端-->数据库等都涉及到缓存。MyBatis作为数据...

yangjianzhou
今天
2
0
最近研究如何加速UI界面开发,有点感觉了

最近在开发JFinal学院的JBolt开发平台,后端没啥说的,做各种极简使用的封装,开发者上手直接使用。 JBolt开发平台包含常用的用户、角色、权限、字典、全局配置、缓存、增删改查完整模块、电...

山东-小木
今天
3
0
《月亮与六便士》的读后感作文3000字

《月亮与六便士》的读后感作文3000字: 看完英国作家威廉.萨默塞特.毛姆所著《月亮与六便士》(李继宏译),第一疑问就是全书即没提到“月亮”,也没提到“六便士”。那这书名又与内容有什么...

原创小博客
昨天
2
0
微信网页授权获取用户信息(ThinkPHP5)+ 微信发送客服消息(一)

以thinkphp5为实例,创建控制器 class Kf extends Controller { /** * [protected description]微信公众号appid * @var [type] */ protected $appid = "xxxxxxxxxxxxxxx"; /** * [protected......

半缘修道半缘君丶
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部