jQuery combined with CSS to achieve the return to top function

CSS Operations

CSS
        $("").css(name|pro|[,val|fn])
    Position$("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    Size $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([options])
        $("").outerWidth([options])

Example Back to top

<!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();">Return to the top</div>
</body>
</html>

<!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;
            /*Center the text horizontally*/
            line-height: 60px;
            /*Text line height*/
        }
        .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>-->
<!-- // Calculate the offset from the viewport -->
<!-- console.log($('.div1').offset().left); // 0-->
<!-- console.log($('.div1').offset().top); // 0-->
<!-- console.log($('.div3').offset().left); // 0-->
<!-- console.log($('.div3').offset().top); // 100-->

<!-- // Calculate the offset from the positioned parent tag (note that it is already positioned)-->
<!-- console.log($('.div3').position().left); // 0-->
<!-- console.log($('.div3').position().top); // 0-->

<!-- // Calculate label size-->
<!-- console.log($('.div4').height()); // 150(width: 150px)-->
<!-- // console.log($('.div4').height('200px')) // height becomes 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>-->


    <!--Scroll bar monitor and return to the top instance-->
    <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()">Return to the top</div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        window.onscroll = function () {
            // The onscroll event is triggered when the element scroll bar is scrolling (window object event)
            let num=$(window).scrollTop(); // The left and right scroll bars are scrollLeft
            // The scrollTop() method returns or sets the vertical position of the scroll bar of the matched elements (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>

Instance extension:

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 Code

 
(function() { 
var $backToTopTxt = "Back to top", $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(); 
//Location under IE6 if (!window.XMLHttpRequest) { 
$backToTopEle.css("top", st + winh - 166); 
} 
}; 
$(window).bind("scroll", $backToTopFun); 
$(function() { $backToTopFun(); }); })();:

This is the end of this article about how to use jQuery and CSS to implement the return to top function. For more information about jQuery and CSS operations, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: