jQuery和CSS3制作回到页面顶部和底部

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

当一个页面的篇幅太长时,用户的检验就有点烦,特别是当用户要到页面的底部或顶部时,只靠scrollBar来操作的确不爽,我有时也烦。当然,W3cplus也有这样的不足之处,好多朋友都有提过,于是在第二版本中我加了一个回到顶部的效果,但不知道怎么加回到底的效果。因为自己的jQuery还处在学习的初级阶段,属于半吊子中的半吊子,时常依赖别人的插件来做效果。比如说,前面介绍的《jQuery制作go to top按钮》中介绍的回到页面顶部的四个demo效果,都是到处整来的,有时只知道其表,不知道其质。真是感到惭愧呀。

今天在Codrops站上看到了cody利用Jamesspecial scroll events写了一篇有关于回到页面顶部和底部的教程——Scrolling to the Top and Bottom with jQuery。于是我也认真学习了一回,虽然不懂那个插件怎么来的,但还是明白了如何利用这个插件来做这要的效果。于是我在这个效果上整了一些CSS3的效果,制作了一个类似于本站的回到页面顶部Button的效果。整理了出来与大家分享,希望对不懂的朋友有所帮助。那我们开始吧:

要实现的效果

正如上图所示,两个Button将固定在浏览器的右下角,当scrollBar在移动动,两个buttons会改变其透明度,当你停止移动scrollbar时,又将恢复到默认状态。最主要的是你点击“回到顶部”的button时,页面将到达顶部,反之,你点击“到达页面底部”的button时,页面将到达底部。下面我们就一起来看看如何实现上面的效果。

HTML Markup

      <body>
        <div id="wrapper">content here</div>
        <div id="topBottomBar">
          <div id="goToTop" class="goToTop">回到顶部</div>
          <div id="goToBottom" class="goToBottom">回到顶部</div>
        </div>
      </body>
    

这个结构可是相当的简单了,我把页面所有的内容放置在元素“div#wrapper”容器之中,而两个buttons放在了“div#topBottomBar”容器之中。这里不花太多时间,我想没人不懂的。

CSS Code

有了结构,那接下来就需要使用CSS来制作两个button的外观,我在此处配合了图片和CSS3制作了两个相对称的效果,具体的大家请看下面代码:

      *{
        margin: 0;
        padding: 0;
      }
      /*==固定buttons在浏览器的右下角处==*/
      #topBottomBar {
        position: fixed;水月
        right: 50px;
      	bottom:5px;
        z-index: 9000;
      }
      /*==制作buttons的外型==*/
      #topBottomBar div {
        /*==button中间的箭头==*/
      	background: url("images/gototop.png") no-repeat scroll center #F3F3F3;
      	/*==多颜色边框效果==*/
        border-color: rgba(203, 78, 255, 0.2) rgba(213, 178, 255, 0.1) rgba(113, 178, 133, 0.1) rgba(220, 100, 200, 0.1);
        /*==不规则圆角效果==*/
      	-moz-border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
      	-webkit-border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
        border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
        border-style: solid;
        border-width: 1px;
        /*==多层阴影==*/
      	-moz-box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
      	-webkit-box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
        box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
        display: block;
        height: 50px;
        overflow: hidden;
        text-indent: -9999px;
        width: 52px;
        cursor: pointer;
        float: left;
        /*==动态变化效果==*/
      	-webkit-transition: all 0.5s ease .03s;
        -moz-transition: all 0.5s ease .03s;
        -o-transition: all 0.5s ease .03s;
        transition: all 0.5s ease .03s;
      }
      /*==悬停效果==*/
      #topBottomBar div:hover {
      	-moz-transform: rotate(-10deg) scale(1.1) translateX(-3px);
      	-webkit-transform: rotate(-10deg) scale(1.1) translateX(-3px);
      	-o-transform: rotate(-10deg) scale(1.1) translateX(-3px);
      	transform: rotate(-10deg) scale(1.1) translateX(-3px);
      }
      /*==向下button效果==*/
      #topBottomBar .goToBottom {
        	-moz-transform: rotate(92deg);
        	-o-transform: rotate(92deg);
        	-webkit-transform: rotate(92deg);
        	transform: rotate(92deg);
        	margin-left: 5px; 
        	background-image: url("images/gotobottom.png");
      }
      /*==向下button的悬停效果==*/
      #topBottomBar .goToBottom:hover {
        -moz-transform: rotate(100deg) scale(1.1) translateY(-3px);
      	-webkit-transform: rotate(100deg) scale(1.1) translateX(3px);
      	-o-transform: rotate(100deg) scale(1.1) translateX(3px);
      	transform: rotate(100deg) scale(1.1) translateX(3px);
      }
      /*==容器样式==*/
      #wrapper {
       width: 960px;
       margin: 50px auto;
       padding: 10px;
       border: 1px solid #ccc;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
      }
    

这样button效果就出来了,大家千万别小看这两个button的样式哟,可以说,他使用了一些常用的css3属性方法,我点了一下,总共使用了css3的五种属性。比如:border-color写的多颜色边框效果、boder-radius制作的不规则圆角效果、box-shadow写的阴影效果、transition做的动画效果、transform做的旋转,移位之类特效。要是您还没有接触的话,可以去看看,很有意思的。

special scroll events插件

下面是一个关键之处,这是一个special scroll events插件,因为我们后面制作效果需要这个插件,具体代码是什么意思,我也不太懂,我是从James Padolsey复制过来的。大家一起看看吧,希望有朋友能解说一下其意思:

      <script type="text/javascript">
        (function(){
          var special = jQuery.event.special,
              uid1 = 'D' + (+new Date()),
              uid2 = 'D' + (+new Date() + 1);

          special.scrollstart = {
            setup: function(){
              var timer,
                  handler = function(evt) {
                    var _self = this,
                        _args = arguments;

                    if(timer) {
                      clearTimeout(timer);
                    } else {
                      evt.type = 'scrollstart';
                      jQuery.event.handle.apply(_self,_args);
                    }

                    timer = setTimeout(function(){
                      timer = null;
                    },special.scrollstop.latency);
                  };
              jQuery(this).bind('scroll',handler).data(uid1,handler);    
            },
            teardown: function(){
              jQuery(this).unbind('scroll',jQuery(this).data(uid1));
            }
          };

          special.scrollstop = {
            latency: 300,
            setup: function(){
              var timer,
                  handler = function(evt) {
                    var _self = this,
                        _args = arguments;

                    if(timer) {
                      clearTimeout(timer);
                    }

                    timer = setTimeout(function(){
                      timer = null;
                      evt.type = 'scrollstop';
                      jQuery.event.handle.apply(_self,_args);
                    },special.scrollstop.latency);
                  };
              jQuery(this).bind('scroll',handler).data(uid2,handler);    
            },
            teardown: function() {
              jQuery(this).unbind('scroll',jQuery(this).data(uid2));
            }
          };
        })();
      </script>
    

jQuery Code

有了插件,我们实现效果就好办多了,别的不多说,大家看代码吧,因为我自己也不是很懂jQuery,就不浪费大家时间了:

      <script type="text/javascript">
         $(function(){
           //the element inside of which we want to scroll
           var contentWrap = $("#wrapper");
           var btns = $("#topBottomBar div");
           //show the buttons
           btns.fadeIn("slow");
           //whenever we scroll fade out both buttons
           $(window).bind("scrollstart",function(){
             btns.stop().animate({"opacity":"0.2"});
           });
           //...and whenever we stop scrolling fade in both buttons
           $(window).bind("scrollstop",function(){
             btns.stop().animate({"opacity":"1"});
           });
           //clicking the "goToBottom" button will make the page scroll to the contentWrap's height
           $("#goToBottom").click(function(e){
             $("html,body").animate({scrollTop:contentWrap.height()},800);
           });
           //clicking the "goToTop" button will make the page scroll to the top of the page
           $("#goToTop").click(function(e){
             $("html,body").animate({scrollTop:"0px"},800);
           });
         });
       </script>
    

当然大家记得要把jQuery的版本库加载进来,不然是没有效果的哟。

到此时,效果就出来了,大家一起来看看吧:

希望上面的效果对大家有所帮助,如果你还不太清楚,你也可以点击Scrolling to the Top and Bottom with jQueryspecial scroll events。如果你有更好的效果,可以与我们一起分享受。

Nike MagistaX Proximo II TF white Fluorescent yellow women football shoes

如需转载,烦请注明出处:https://www.w3cplus.com/jquery/scrolling-to-the-top-and-bottom-with-jquery-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部