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

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;
}