jquery结合css实现返回顶部功能

css操作

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

实例返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
 
 
          window.onscroll=function(){
 
              var current=$(window).scrollTop();
              console.log(current)
              if (current>100){
 
                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
          }
 
 
           function returnTop(){
//               $(".div1").scrollTop(0);
 
               $(window).scrollTop(0)
           }
 
 
 
 
    </script>
    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: greenyellow;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
 
     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .div3{
            height: 120px;
            width: 120px;
            background-color: seagreen;
        }
        .div2{
            position: relative;
        }
        .div4{
            background-color: aquamarine;
            width: 150px;
            height: 150px;
            padding: 5px;
            margin: 6px;
            border: 4px solid green;
        }
 
        .div5{
            width: 50%;
            height: 200px;
            overflow: auto;
        }
        .div6{
            width: 100%;
            height: 1000px;
        }
        .div5{
            background-color: aquamarine;
        }
        .div6{
            background-color: chocolate;
        }
        .div7{
            width: 90px;
            height: 60px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: yellow;
            text-align: center;
            /*文本横向居中*/
            line-height: 60px;
            /*文本行高*/
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--    <div class="div1"></div>-->
<!--    <div class="div2">-->
<!--        <div class="div3"></div>-->
<!--    </div>-->
<!--    <div class="div4"></div>-->
 
<!--    <script src="jquery-3.3.1.js"></script>-->
<!--    <script>-->
<!--        // 计算离视口偏移量-->
<!--        console.log($('.div1').offset().left); // 0-->
<!--        console.log($('.div1').offset().top); // 0-->
<!--        console.log($('.div3').offset().left); // 0-->
<!--        console.log($('.div3').offset().top); // 100-->
 
<!--        // 计算离已定位的父标签的偏移量(注意是已定位)-->
<!--        console.log($('.div3').position().left); // 0-->
<!--        console.log($('.div3').position().top); // 0-->
 
<!--        // 计算标签尺寸-->
<!--        console.log($('.div4').height()); // 150(width: 150px)-->
<!--        // console.log($('.div4').height('200px')) // 高度变成200px-->
<!--        console.log($('.div4').innerHeight()); // 160(width: 150px+padding: 5px+padding: 5px)-->
<!--        console.log($('.div4').outerHeight()); // 168(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px)-->
<!--        console.log($('.div4').outerHeight(true)); // 180(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px+margin: 6px+margin: 6px)-->
<!--    </script>-->
 
 
    <!--滚动条监听并返回顶部实例-->
    <div class="div5">
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
    </div>
    <div class="div6">
        <button onclick="returnTop1()">return</button>
    </div>
    <div class="div7 hide" onclick="returnTop()">返回顶部</div>
 
    <script src="jquery-3.3.1.js"></script>
    <script>
        window.onscroll=function () {
            // onscroll 事件在元素滚动条在滚动时触发(window对象事件)
            let num=$(window).scrollTop(); // 左右滚动条是scrollLeft
            // scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置(jquery)
            console.log(num);
            if (num>100) {
                $('.div7').removeClass('hide');
            }else{
                $('.div7').addClass('hide');
            };
        };
        function returnTop() {
            $(window).scrollTop(0);
        };
        function returnTop1() {
            $('.div5').scrollTop(0);
        };
    </script>
</body>
</html>

实例扩展：

CSS：

.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}

jQuery代码

(function() { 
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
$("html, body").animate({ scrollTop: 0 }, 120); 
}), $backToTopFun = function() { 
var st = $(document).scrollTop(), winh = $(window).height(); 
(st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
//IE6下的定位 
if (!window.XMLHttpRequest) { 
$backToTopEle.css("top", st + winh - 166); 
} 
}; 
$(window).bind("scroll", $backToTopFun); 
$(function() { $backToTopFun(); }); })();： 

到此这篇关于jquery结合css实现返回顶部功能的文章就介绍到这了,更多相关jquery的css操作内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！

编程技巧