HI,欢迎您光临Downzz,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!
当前位置:首页 > 站长教程 > 建站经验 > jQuery教程 > jquery实现的点击返回顶部和底部特效详解_jQuery实例

jquery实现的点击返回顶部和底部特效详解_jQuery实例

时间:2019-10-27人气:427来源:Downzz我要评论(0)

本章节介绍一下如何利用jquery实现返回顶部和底部的效果,这种效果在长篇幅的网站中经常遇到,是非常人性化的效果,以前需要拖动滚动条实现的效果,只要点击一个按钮即可实现,下面就通过代码实例介绍一下如何实现此功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
.box{
  height:200px;
  width:100%;
  background:#ccc;
  margin:10px 0;
}
.location{
  position:fixed;
  right:0;
  bottom:10px;
  width:20px;
  background:#FFC;
  padding:5px;
  cursor:pointer;
  color:#003
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function($){
  $('.scroll_top').click(function(){
    $('html,body').animate({scrollTop:'0px'},800);
  }) 
  $('.scroll_bottom').click(function(){
    $('html,body').animate({scrollTop:$('.bottom').offset().top},800);
  })
})
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box bottom"></div>
<div class="location">
  <p class="scroll_top">返回顶部</p>
  <p class="scroll_bottom">滑到底部</p>
</div>
</body>
</html>

上面的代码实现了我们的要求,点击响应按钮可以实现返回顶部和底部的功能,下面介绍一下它的实现过程。

一.代码注释:

1.$(document).ready(function($){}),当文档结构完全加载完毕再去执行函数中的代码。

2.$('.scroll_top').click(function(){}),为p元素注册click事件处理函数,点击它可以返回顶部。

3.$('html,body').animate({scrollTop:'0px'},800),以动画的方式将body元素的scrollTop设置为0,也就是返回顶部。

4.$('html,body').animate({scrollTop: $('.bottom').offset().top},800),设置body的scrollTop属性值为 $('.bottom').offset().top值,这个值并不是精准的返回底部的值,但是通过设置已经完全可以满足。

二.相关阅读:

1.click事件可以参阅jQuery click 事件一章节。

2.animate()函数可以参阅jQuery animate()一章节。

3.scrollTop属性可以参阅js scrollTop一章节。 

4.offset()函数可以参阅jQuery offset()一章节。

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 抖音镜子变身术特效制作教程_软件教程

    抖音近日镜子变身术的特效视频突然爆火,吸引了一大批人跟风模仿,但是怎么弄都和原版有差距,效果不是太好。而下面手机乐园小编水银师就能为大家提供相应的镜子变身术特效制作方法,希望能够帮到你。抖音镜子变身术视频制作步骤:1、现在倘若想制作出镜子变
  • 抖音沙画特效设置教程_软件教程

    现在有许多用户想要制作与抖音热门视频类似的“沙画”特效的短视频,但是不清楚具体应该怎么弄。而下面手机乐园的小编水银师就为大家提供了抖音沙画特效的设置方法,相信可以帮助到你。抖音沙画特效设置步骤:1、想制作沙画特效视频的话,那么第一步就应该下

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号-4 | 浙公网安备 42011102000245号工信部

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!