页面全屏垂直平滑滚动代码实例

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

本章节分享一段代码实例,它实现了网页全屏垂直滚动效果。

并且详细介绍一下它的实现过程,需要的朋友可以做一下参考。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
body {
  margin: 0;
  height: 100%;
  overflow:hidden;
}
#a111 {
  position: fixed;
  width: 1000px;
  left: 10%;
}
#a111 a {
  display: block;
  width: 150px;
  height: 20px;
  background: #000;
  color: #fff;
  float: left;
}
#a111 a:hover {
  background: #f60;
}
#b11 {
  height: 1000px;
  background: #090;
}
#b22 {
  height: 1000px;
  background: #fc0;
}
#b33 {
  height: 1000px;
  background: #09d;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($) {
  $.extend($.fn, {
    scrollTo: function (time, to) {
      time = time || 800;
      to = to || 1;
      $('a[href*=#]', this).click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
        && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target || $('[id=' + this.hash.slice(1) + ']');
          if ($target.length) {
            if (to == 1) {
              $('html,body').animate({
                scrollTop: $target.offset().top
              }, time);
            }
            else if (to == 2) {
              $('html,body').animate({
                crollLeft: $target.offset().left
              }, time);
            }
            else {
              alert('argument error');
            }
            return false;
          }
        }
      });
    }
  });
})(jQuery);
 
$(function () {
  $("#a111").scrollTo(700)
});
</script>
</head>
<body>
  <div id="a111">
    <a href="#b11">犀牛前端部落一</a>
    <a href="#b22">犀牛前端部落二</a>
    <a href="#b33">犀牛前端部落三</a>
  </div>
  <div id="b11">页面一</div>
  <div id="b22">页面二</div>
  <div id="b33">页面三</div>
</body>
</html>

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

一.代码注释:

(1).(function ($) {})(jQuery),匿名自执行函数,传递的是jQuery对象。

(2).$.extend($.fn, {}),扩展$.fn对象。

(3).scrollTo: function (time, to) {},此方法实现了平滑滚动效果,time规定动画执行的时间,to表示滚动的方位,如果是1,那么就是垂直滚动,如果是2,那么就是水平滚动。

(4).time = time || 800,如果传递了time,那么就使用传递的参数,否则默认值是800毫秒。

(5).to = to || 1,如果传递了to,那么就用传递的参数,否则默认值是1。

(6).$('a[href*=#]', this).click(function () {}),为href属性值baohan#的链接a元素注册click事件处理函数。

(7).if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname),location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 是用来判断是否是当前页面锚点定位,location.hostname == this.hostname是用来验证是否是同域。

(8).var $target = $(this.hash),获取链接的锚点部分也就是#和#号的后面的部分。

(9).$target = $target.length && $target || $('[id=' + this.hash.slice(1) + ']'),判断是否存在锚点部分,如果存在那么就获取和id对应的元素对象。(10).if ($target.length) {},如果存在指定对象。

(11).if (to == 1) {

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

    scrollTop: $target.offset().top

  }, time);

},进行垂直滚动效果,滚动的尺寸就是指定元素offset().top值。

二.相关阅读:

(1).location.pathname可以参阅location.pathname一章节。

(2).replace()可以参阅正则表达式replace()函数一章节。

(3).slice()可以参阅javascript slice() 一章节。

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

(5).offset()方法可以参阅jQuery offset()一章节。

页面全屏垂直平滑滚动代码实例

回复

我来回复
  • 暂无回复内容