点击返回顶部效果实现代码详解

快乐打工仔 分类:实例代码

本章节详细分享一段代码实例,它实现了点击按钮可以平滑返回网页顶部的效果。

这样的效果在实际应用中非常的广泛,可能实现的策略有不少,下面就分享一个比较简单的一种。

代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
*{
  margin:0px;
  padding:0px;
}
body {
  height:1500px;
}
#top{
  width:50px;
  height:50px;
  background:green;
  position:fixed;
  right:10px;
  bottom:50px;
  display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      $("#top").css("display", "block");
    }else {
      $("#top").css("display", "none");
    }
  })
  $("#top").click(function () {
    $("body,html").animate({
      scrollTop: 0
    }, 500);
  })
})
</script>
</head>
<body>
<div id="top"></div>
</body>
</html>

上面的代码实现了我们需要的功能,下面介绍一下它的实现过程。

一.代码注释:

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

(2).$(window).scroll(function () {}),注册scroll事件处理函数,也就是滚动窗口滚动条时会触发此事件。

(3).if ($(this).scrollTop() > 200) {

  $("#top").css("display", "block");

}else {

  $("#top").css("display", "none");

},当向下滚动超过200px,那么就显示返回顶部按钮,否则隐藏。

(4).$("#top").click(function () {

  $("body,html").animate({

    scrollTop: 0

  }, 500);

}),点击按钮可以返回顶部。

二.相关阅读:

(1).scroll事件可以参阅jQuery scroll事件一章节。

(2).scrollTop()可以参阅jQuery scrollTop()一章节。

(3).css()可以参阅jQuery css()一章节。

(4).animate()可以参阅jQuery animate()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容