Home >Web Front-end >JS Tutorial >Return to the top of the page top button is implemented through anchor points (self-written)_javascript skills

Return to the top of the page top button is implemented through anchor points (self-written)_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:23:491166browse

After realizing my small job hopping, I joined the current company on August 7th. It seems that I have joined the ranks of the fire brigade. I have not started to develop new modules, but have been implementing new requirements in the already online modules. , sometimes I really want to ask if some users are out of their minds, and the demands they put forward just want to make people laugh three times. . . Fortunately, the sister who handles the requirements in the project team has rich work experience and can coordinate well with users, so that we developers are not so hard~

When users use the system, there will be a lot of form operations. However, Many forms are foot wraps, long and long~

So you need a top button to return to the top of the page~

Although there are many online methods, they are too cumbersome. There is one judgment and one positioning. In short, it is too troublesome~ Sometimes it saves time to just use the previous code, but it still needs to be considered based on the performance of the system, in order not to bring unnecessary unnecessary trouble to the browser and server. Despite the pressure, I decided to write a top button myself~

Add the anchor point to the top of the page in the tag:

Copy code The code is as follows:

a id="_top">

At the end of Add js code (implemented with div):
Copy code The code is as follows:



Set the css style of the top button (so that the div is always in the lower right corner of the page):
Copy code The code is as follows:

#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/ top.png");
width: 40px;
height:40px;
cursor: pointer;
}

Finally, don’t forget to introduce it in the jsp page css style.

Rendering:
Return to the top of the page top button is implemented through anchor points (self-written)_javascript skills
Statement:
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