Recently, I need to create a button to return to the top when developing a website, but I mainly develop it for the backend and am not very skilled in the frontend. After online information query, I have created a button to return to the top. The following are two simple ways to record it. Friends who like this website can bookmark it and will update their learning materials from time to time.
The first type: Quoting external jQueryCreate a new HTML page, copy and save the following code, open it through the browser, and you can see the effect.
<!doctype html><html lang=en><head><meta charset=UTF-8><title>doc</title><style> .arrow{ border: 9px solid transparent; border-bottom-color: #3DA0DB; width: 0px; height: 0px; top:0px } .stick{ width: 8px; height: 14px; border-radius: 1px; background-color: #3DA0DB; top:15px; } #back_top div{ position: absolute; margin: auto; right: 0px; left: 0px; } #back_top{ background-color: #dddddd; height: 38px; width: 38px; border-radius: 3px; display: block; cursor: pointer; position: fixed; right: 50px; bottom: 100px; display: none; }</style></head><body><div id=article></div><div id=back_top><div class=arrow></div><div class=stick></div><script src=http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js></script><script>$(function(){ for(var i =0 ;i <100;i++){ $(#article).append(<p>xxxxxxxxxx<br></p>) }})</script><script>$(function(){ $(window).scroll(function(){ // As long as the window scrolls, the following code will be triggered var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Get the scrolling height if( scrollt >200 ){ //Judge the height exceeds 200px after scrolling, $(#back_top).fadeIn(400); //Fake in}else{ $(#back_top).stop().fadeOut(400); //If it returns or does not exceed, fade out. The animation before stop() must be added, otherwise there will be flashing} }); $(#back_top).click(function(){ //When clicking the tag, use animate to scroll to the top in 200ms.$(html,body).animate({scrollTop:0px},200); }); }); });</script></body></html> The second type: use css and special icons to set itThe entire code is simple and beautiful. Return to the top button. The same as above, copy the code into the HTML file and open it to see the effect.
<!doctype html><html lang=en><head><meta charset=UTF-8><title>doc</title><style> #back_top{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px; text-decoration:none; display:none; background-color:#999999; } #back_top span{ display:block; width:60px; color:#ddddd; font-size:40px; text-align:center; margin-top:4px; } #back_top span:hover{ color:#cccccc; } </style></head><body><div id=article></div><a id=back_top href=script:;> <span>⌆</span> </a></div><script>$(function(){ for(var i =0 ;i <100;i++){ $(#article).append(<p>xxxxxxxxxx<br></p>) }})</script><script>$(function(){ $(window).scroll(function(){ //As long as the window scrolls, the following code will be triggered var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Get the scrolling height if( scrollt >200 ){ //Judge the height after scrolling exceeds 200px, and then $(#back_top).fadeIn(400); //Fake out}else{ $(#back_top).stop().fadeOut(400); //If it returns or does not exceed, fade in. The animation before stop() must be added, otherwise there will be flashing} }); $(#back_top).click(function(){ //When clicking on the tag, use animate to scroll to the top in 200ms.$(html,body).animate({scrollTop:0px},200); });});</script></body></html>The above two methods only provide ideas, and can be used directly. You can debug the icons you want by yourself. I hope it will be helpful to everyone's learning, and I hope everyone will support Wulin.com more.