Small rocket back to top case
1. Scroll the page. When the distance between the page and the top exceeds 1000px, the small rocket will be displayed.
Encapsulated in scroll function, the current page distance from the top is $(window). Scrolltop > = 1000
fadeIn and fadeOut for small rocket display and hide
//When the page exceeds 1000 px When it's time, let the small rocket show that if it's less than 1000 px，Hide $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").stop().fadeIn(1000); } else { $(".actGotop").stop().fadeOut(1000); } }) });
2. When the small rocket appears, click the small rocket to return to the top of the page.
Click the event outside to get the page, html or body, and return to the animation function with animate. When it reaches the top, the scrollTop is 0, and the time can be set
$(".actGotop").click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 1000); });
The overall code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 8000px; } a { color: #FFF; } .actGotop { position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none; z-index: 100; } .actGotop a, .actGotop a:link { width: 150px; height: 195px; display: inline-block; background: url(images/gotop.png) no-repeat; outline: none; } .actGotop a:hover { width: 150px; height: 195px; background: url(images/gotop.gif) no-repeat; outline: none; } </style> </head> <body> <!-- Back to top rocket --> <div><a href="javascript:;" title="Top"></a></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //When the page exceeds 1000 px When it's time, let the small rocket show that if it's less than 1000 px，Hide $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").stop().fadeIn(500); } else { $(".actGotop").stop().fadeOut(500); } }) }); //Sign up outside $(".actGotop").click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 1000); //scrollTop For 0 // $(window).scrollTop(0); }); </script> </body> </html>