Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > Imitation CSDN Blog return to the top of the page function implementation principle and code_html5 tutorial skills

Imitation CSDN Blog return to the top of the page function implementation principle and code_html5 tutorial skills

WBOY
Release： 2016-05-16 15:49:14
Original
1649 people have browsed it

Only 2 places have been modified:
, the speed of return --> changed to go back slowly. (It turned out to be a flash back)
, the timing of the return to top icon appearing --> changed to be displayed as long as it is not at the top. (It turned out to be displayed after scrolling down 500px)

Note: JS must be written after Html;
HTML

Copy the code
The code is as follows:

Javascript code

Copy code
The code is as follows:



CSS style

Copy code
The code is as follows:

#d- top {
position: fixed;
float: right;
z-index: 10;
right: 10px;
bottom: 40px;
}
#d-top img {
width: 42px;
opacity: 0.3;
}
img {
border: medium none;
}
Related labels：
top
source：php.cn
Previous article：Overview of the use of audio tags in html5 music player_html5 tutorial skills Next article：How to implement texture fill and stroke (Fill And Stroke) in HTML5 Canvas_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Get the total return value of the input field method I'm trying to find the total value entered by the user. Get an aggregate that multiplies a...
From 2024-04-06 18:19:37
0
1
380
Laravel 8 - How to redirect /{editable_text} route to /{user} route I've been trying to create a redirect route to lead me to a user profile. The redirect rou...
From 2024-04-06 17:26:11
0
1
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template