js implementation returns top effect
- 2021-08-03 08:44:31
- OfStack
Without saying much, please look at the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Click the button to the bottom of the page / Return to the top code of the page </title>
<style type="text/css">
#back-to-top{ position: fixed; bottom: 50px; right: 10%; }
</style>
</head>
<body>
<div style="height: 3000px;"></div>
<div id="back-to-top">
<a href="#top" rel="external nofollow" > Back to the top </a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// First, the #back-to-top Hide
$("#back-to-top").hide();
// When the position of the scroll bar is at the top of the distance 100 Pixels below, the jump link appears, otherwise it disappears
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(100);
}
else
{
$("#back-to-top").fadeOut(100);
}
});
// When you click the jump link, go back to the top of the page
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},"speed");
return false;
});
});
});
</script>
</body>
</html>