Summary of several implementations of returning to the top in HTML pages
|
Recently, I need to make a back-to-top button when developing a website, but I am mainly engaged in back-end development and not very familiar with the front-end. After searching online, I made a back-to-top button. Here are two simple ways to record them. Friends who like this website can bookmark it. The learning materials will be updated from time to time. The first one: reference external jQuery Create a new HTML page, copy and save the following code, and open it through a browser to 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>
</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 height after scrolling if( scrollt >200 ){ //If the height after scrolling exceeds 200px, display $("#back_top").fadeIn(400); //Fade in }else{
$("#back_top").stop().fadeOut(400); //If it returns or does not exceed, fade out. You must add stop() to stop the previous animation, otherwise it will flash.}
});
$("#back_top").click(function(){ //When clicking the label, use animate to scroll to the top within 200 milliseconds$("html,body").animate({scrollTop:"0px"},200);
});
});
</script>
</body>
</html>The second method: use css and special icons to set The whole code creates a simple and beautiful back to the top button. 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 10px;
text-decoration:none;
display:none;
background-color:#999999;
}
#back_top span{
display:block;
width:60px;
color:#dddddd;
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 height after scrolling if( scrollt >200 ){ //If the height after scrolling exceeds 200px, display $("#back_top").fadeIn(400); //Fade out }else{
$("#back_top").stop().fadeOut(400); //If it returns or does not exceed, fade in. You must add stop() to stop the previous animation, otherwise it will flash.}
});
$("#back_top").click(function(){ //When clicking the label, use animate to scroll to the top within 200 milliseconds$("html,body").animate({scrollTop:"0px"},200);
});
});
</script>
</body>
</html>The above two methods only provide ideas, you can use them directly, and you can debug the specific icons you want yourself. I hope it will be helpful for everyone's learning, and I also hope that everyone will support 123WORDPRESS.COM. |
<<: What we have to say about CSS absolute and relative
>>: A brief discussion on two methods to solve space-evenly compatibility issues
Recommend
React error boundary component processing
This is the content of React 16. It is not the la...
React Hook usage examples (6 common hooks)
1. useState: Let functional components have state...
Several ways to use v-bind binding with Class and Style in Vue
Adding/removing classes to elements is a very com...
Detailed explanation of MySQL DEFINER usage
Table of contents Preface: 1.Brief introduction t...
Combining XML and CSS styles
student.xml <?xml version="1.0" enco...
Detailed explanation of nginx proxy_cache cache configuration
Preface: Due to my work, I am involved in the fie...
CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing
1. When the mobile terminal processes the list sl...
Detailed process of building mysql5.7.29 on centos7 of linux
1. Download MySQL 1.1 Download address https://do...
Detailed process of deploying MySQL with docker (common applications deployed with docker)
I have introduced it to you before: docker (deplo...
HTML tags list and usage instructions
List of HTML tags mark type Name or meaning effec...
Example code comparing different syntax formats of vue3
The default template method is similar to vue2, u...
Pure CSS3 code to implement a running clock
Operation effectCode Implementation html <div ...
MySQL quick recovery solution based on time point
The reason for writing such an article is that on...
Detailed explanation of Vue's self-implementation of dispatch and broadcast (dispatch and broadcast)
Problem to be solved Mainly for cross-level commu...
Data storage implementation method in WeChat applet
Table of contents Global variable globalData Page...