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
Solution to forgetting the password of the pagoda panel in Linux 3.X/4.x/5.x
Enter ssh and enter the following command to rese...
Native JS implementation of loading progress bar
This article shares a dynamic loading progress ba...
How to install Odoo12 development environment on Windows 10
Preface Since many friends say they don’t have Ma...
Simple example of HTML checkbox and radio style beautification
Simple example of HTML checkbox and radio style b...
An article to understand Linux disks and disk partitions
Preface All hardware devices in the Linux system ...
MySQL GROUP_CONCAT limitation solution
effect: The GROUP_CONCAT function can concatenate...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
How to install Postgres 12 + pgadmin in local Docker (support Apple M1)
Table of contents introduce Support Intel CPU Sup...
How to execute Linux shell commands in Docker
To execute a shell command in Docker, you need to...
How to redirect to https through nginx load balancing
Copy the certificate and key on the web scp -rp -...
The Linux operating system uses Python to implement the visualization function of the task manager
1. Python installation 1. Create a folder. mkdir ...
MySQL installation and configuration tutorial for Mac
This article shares the MySQL installation tutori...
Docker Machine in-depth explanation
Differences between Docker and Docker Machine Doc...
Implementing the preview function of multiple image uploads based on HTML
I recently wrote a script for uploading multiple ...
Detailed explanation of MySQL cursor concepts and usage
This article uses examples to explain the concept...