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
MySQL database transaction example tutorial
Table of contents 1. What is a transaction? 2. Th...
Detailed explanation of 5 solutions for CSS intermediate adaptive layout
Preface When making a page, we often encounter co...
Pure CSS to implement iOS style open and close selection box function
1 Effect Demo address: https://www.albertyy.com/2...
Detailed explanation of the visualization component using Vue to compare the differences between two sets of data
Table of contents need: Main points: According to...
MySQL data table partitioning strategy and advantages and disadvantages analysis
Table of contents Why do we need partitions? Part...
Detailed explanation of the platform bus of Linux driver
Table of contents 1. Introduction to platform bus...
Solution for adding iptables firewall policy to MySQL service
If your MySQL database is installed on a centos7 ...
XHTML introductory tutorial: Web page Head and DTD
Although head and DTD will not be displayed on th...
Use pure JS to achieve the secondary menu effect
This article example shares the specific code of ...
Detailed explanation of MySQL and Spring's autocommit
1 MySQL autocommit settings MySQL automatically c...
Making a simple game engine with React Native
Table of contents Introduction Get started A brie...
Tutorial on using $attrs and $listeners in Vue
Table of contents introduce Example Summarize int...
Detailed explanation of inline-block layout implementation of CSS display attribute
CSS display property Note: If !DOCTYPE is specifi...
Detailed steps for installing and debugging MySQL database on CentOS7 [Example]
This example requires downloading and installing ...
React Native startup process detailed analysis
Introduction: This article takes the sample proje...