Using anchor links is a simple function implementation that returns to the top. This implementation mainly places an anchor link with a specified name at the top of the page, and then places a link back to the anchor at the bottom of the page. Users can click the link to return to the top position of the anchor
<body id="goTop"> <div> <img src="1.jpg"> <img src="1.jpg"> <img src="1.jpg"> </div> <a href="#GoTop "class =" BTN "title =" go back to the top "></a> </body>2,scrollTo()
The scrollTo(x,y) method scrolls the document displayed in the current window so that the point specified by coordinates x and Y in the document is located in the upper left corner of the display area
Setting scrollTo(0,0) can achieve the effect of returning to the top
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">Back to the top</button> <script> test.onclick = function(){ scrollTo(0,0); } </script> </body>3,scrollTop()
The scrollTop property indicates the number of pixels hidden above the content area. When the element is not scrolled, the value of scrollTop is 0. If the element is scrolled vertically, the value of scrollTop is greater than 0, and represents the pixel width of invisible content above the element
Because scrollTop is writable, you can use scrollTop to realize the function of returning to the top
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">Back to the top</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script> </body>4,scrollBy()``
The scrollBy(x,y) method scrolls the document displayed in the current window, and X and Y specify the relative amount of scrolling
As long as the scrolling length of the current page is taken as a parameter and scrolled backwards, the effect of returning to the top can be realized
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">Back to the top</button> <script> test.onclick = function(){ var top = document.body.scrollTop || document.documentElement.scrollTop scrollBy(0,-top); } </script> </body>5,scrollIntoView()
The Element.scrollIntoView method scrolls the current element into the visible area of the browser
This method can accept a Boolean value as a parameter. If true, it means that the top of the element is aligned with the top of the visible part of the current area (provided that the current area can be scrolled); if false, it means that the bottom of the element is aligned with the tail of the visible part of the current area (provided that the current area can be scrolled). If this parameter is not provided, it defaults to true
The principle of using this method is similar to that of using anchor points. Set the target element at the top of the page. When the page scrolls, the target element will be scrolled outside the page area. Click the back to top button to return the target element to its original position, and the expected effect will be achieved
<body style="height:2000px;"> <div id="target"></div> <button id="test" style="position:fixed;right:0;bottom:0">Back to the top</button> <script> test.onclick = function(){ target.scrollIntoView(); } </script> </body>6. Scrolling with animation
Bind the scroll event to the window to monitor the page scrolling distance. When it exceeds the height of one screen, the button to return to the top will be displayed
Bind the click event to the button. The method to return to the top is to obtain the page scrolling distance, and then calculate the step size. Here, the scrolling distance is divided by 5, and the scrolling speed is from fast to slow. Here, the timer is used to control the scrolling frequency. It is recommended to set a smaller value. If the time interval is too long, there will be a feeling of "frame skipping".
1. Native method
/* html part */ <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <a href="javascript:;" id="top">Back to top</a> </body>
/* css part */ div { height: 150px; } div:nth-child(odd) { background-color: #8ae238; } div:nth-child(even) { background-color: #66d9ef; } .top { position: fixed; right: 50px; bottom: 50px; display: block; width: 50px; height: 50px; font-size: 20px; background-color: white; display: none; } </style>
<script> /* js code */ var topBtn = document.getElementById('top'); // Get window height var winHeight = document.documentElement.clientHeight; window.onscroll = function () { // Get the page scrolling distance upward. chrome browser recognizes document.body.scrollTop, while Firefox recognizes document.documentElement.scrollTop. Compatibility processing is done here var toTop = document.documentElement.scrollTop || document.body.scrollTop; // If you scroll more than one screen, the return to top button appears, otherwise it is hidden if(toTop>=winHeight){ topBtn.style.display = 'block'; }else { topBtn.style.display = 'none'; } } topBtn.onclick=function () { var timer = setInterval(function () { var toTop = document.documentElement.scrollTop || document.body.scrollTop; // Judge whether to reach the top, stop rolling when reaching the top, and continue rolling when not reaching the top if(toTop == 0){ clearInterval(timer); }else { // Set scroll speed var speed = Math.ceil(toTop/5); // Page scroll up document.documentElement.scrollTop=document.body.scrollTop=toTop-speed; } },50); } </script>
2. jQuery method
<script> /* js code */ $(window).on('scroll', function () { // Determine whether to show or hide the button if($(this).scrollTop()>=$(this).height()){ $('#top').fadeIn('slow'); }else { $('#top').fadeOut('slow'); } }); $('#top').on('click',function () { // Set the scrolling animation. Note that $('body ') is used instead of $(window) $('body').animate(,500); }); </script>