zoukankan      html  css  js  c++  java
  • jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能...

     1     /*返回顶部*/
     2     function toTop() {
     3         $(".to_top").hide();
     4         $(window).scroll(function(){
     5             var scroll_top = $(document).scrollTop();
     6             if(scroll_top != 0){
     7                 $(".to_top").show();
     8             }else{
     9                 $(".to_top").hide();
    10             }
    11         });
    12         $(".to_top").click(function(){
    13             $("body,html").animate({scrollTop:0},500);
    14             $(".to_top").hide();
    15            
    16         });
    17          $(".to_top").mouseover(function(){
    18             $(".to_top").css({
    19                 "filter":"alpha(opacity=70)",
    20                 "-moz-opacity":"0.7",
    21                 "opacity":"0.7"
    22             });
    23              return false;
    24         });
    25           $(".to_top").mouseout(function(){
    26             $(".to_top").css({
    27                 "filter":"alpha(opacity=50)",
    28                 "-moz-opacity":"0.5",
    29                 "opacity":"0.5"
    30             });
    31              return false;
    32         });
    33     }
    34     toTop();

    值得注意的是scrollTop()方法:

          它的作用是获取匹配元素相对滚动条顶部的偏移。(此方法对可见和隐藏元素均有效)

          用法:

              比如设置相对滚动条顶部的偏移:$("div.demo").scrollTop(300);

    在html和css代码中也需要注意定位反回顶部按钮的位置和使他浮在现有元素之上。

    html代码:

    1 <div class="to_top" style="z-index:99999;display:block;">
    2  </div> 

    css代码:

     1 /*这里是返回顶部按钮*/
     2 .to_top {
     3     position:fixed;
     4     display:block;
     5     background: url(../../images/footer-totop.png) no-repeat;
     6     filter:alpha(opacity=50);
     7     -moz-opacity:0.5;
     8     opacity:0.5;
     9     float:right;
    10     width:60px;
    11     height:60px;
    12     margin-top:37%;
    13     margin-left:95%;
    14 }

         

  • 相关阅读:
    spring cloud 学习
    python学习-2 python安装和环境变量的设置
    python学习-1 编程语言的介绍
    LIUNX随堂学习-3 权限
    LIUNX随堂学习-2 用户和组,增、删、改、查
    LIUNX随堂学习-1 用户及查看信息
    MySQL--Oracle导出数据csv
    MySQL--mysql中You can’t specify target table for update in FROM clause错误解决方法
    Python--安装
    MySQL--复制
  • 原文地址:https://www.cnblogs.com/skylar/p/3909390.html
Copyright © 2011-2022 走看看