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
Detailed explanation of sshd service and service management commands under Linux
sshd SSH is the abbreviation of Secure Shell, whi...
Detailed explanation of the use of Join in Mysql
In the previous chapters, we have learned how to ...
How to delete extra kernels in Ubuntu
Step 1: View the current kernel rew $ uname -a Li...
How to install ROS Noetic in Ubuntu 20.04
Disclaimer: Since the project requires the use of...
Sharing the detailed process of setting up Mysql5.6 to allow external network access
I recently deployed MySQL 5.6 and found that by d...
Solution to MySql Error 1698 (28000)
1. Problem description: MysqlERROR1698 (28000) so...
How to install JDK 13 in Linux environment using compressed package
What is JDK? Well, if you don't know this que...
Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04
We will install phpMyAdmin to work with Apache on...
Detailed explanation of Javascript basics loop
Table of contents cycle for for-in for-of while d...
Quickly solve the problem of garbled characters and jump lines in mysql exported scv files
Due to work reasons, it is often not possible to ...
MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)
Download the latest version of MySQL for Ubuntu L...
Vue Element front-end application development: Use of API Store View in Vuex
Table of contents Overview 1. Separation of front...
How to install Nginx in CentOS7 and configure automatic startup
1. Download the installation package from the off...
CSS and JS to achieve romantic meteor shower animation
1. Rendering 2. Source code HTML < body > &...
Solution to the problem that the configuration file my.cnf in MySQL cannot be started due to permission issues
This article mainly introduces the relevant solut...