JavaScript simply returns to the top code and comments

In our daily development process, in order to provide users with a better experience, our pages will have a return to the top function. The most common one isusing JavaScriptto implement the return to the top code. Today Let me give you a detailed introduction to JavaScriptReturn to the top codeand comments!

I recently made a ranking page with many categories and displayed it in the form of pictures and texts... In the end, the page was obviously too long, and the user experience was naturally not good enough. Finally, I thought of adding an in-page jump navigation to the upper part of the page to navigate directly to the category naming anchor block of this page. Of course, this needs to be combined with the "return to top" function to achieve a better experience. Of course, under normal circumstances, you must first avoid pages that are too long. If the content is weak and not relevant enough, the bounce rate will be very high.

The following is a simple code implementation of the return to top effect, with comments.

1. The simplest static return to the top, click to jump directly to the top of the page, common in fixed placement at the bottom of the page return to the top function

Method 1:Use named anchors Click to return to the top element with the preset ID of top

html code

返回顶部

Method 2:Operation scroll function is used to control the scroll bar position (the first parameter is the horizontal position, the second parameter is the vertical position)

html code

返回顶部

Disadvantages:Return effect It is immediate and does not conform to the scrolling feeling of general browsing pages;

is statically fixed at the bottom of the page and may not be visible to users.

2. Simple static return to the top, use js to simulate the scrolling effect and slide up to the top

js code

pageScroll(){ window.scrollBy(0,-100); scrolldelay = setTimeout('pageScroll()',100); sTop=document.documentElement.scrollTop+document.body.scrollTop; (sTop==0) clearTimeout(scrolldelay); }

html code

返回顶部

Disadvantages:The scrolling effect is not smooth, and when the page is very long, click to return to the top. If you do not reach the top of the page, you can no longer browse the page normally;

Same as above It is still statically fixed at the bottom of the page and may not be exposed to users.

3. Dynamic on-demand loading returns to the top, css side screenAbsolute positioning, combined with simple jQuery animation to achieve a better experience

js code

gotoTop(min_height){ gotoTop_html = '
返回顶部
'; $("#page").append(gotoTop_html); $("#gotoTop").click( (){$('html,body').animate({scrollTop:0},700); }).hover( (){$().addClass("hover");}, (){$().removeClass("hover"); }); min_height ? min_height = min_height : min_height = 600; $(window).scroll((){ s = $(window).scrollTop(); ( s > min_height){ $("#gotoTop").fadeIn(100); }{ $("#gotoTop").fadeOut(200); }; }); }; gotoTop();

css style code

{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}

This method determines the height of the page and displays "return to the top" to the user as needed. It uses css style to achieve absolute positioning of the screen. With the help of jQuery achieves better and smoother scrolling effect. Further consideration is that if the user sets the browser to disable js, then we can combine the third solution with the first solution. After disabling js, the third solution will not be visible to the user. If it is not disabled, we will add a sentence in the js code. Hide the first option.

Summary:

In short, long pages should be avoided as much as possible. When unavoidable, adding the "return to top" function may It will give users a relatively better experience. I hope it will be helpful to you!

Related recommendations:

Example of JavaScript implementation of return to top effect

javascript - How to bring the content of the iframe back to the top outside the iframe

JS implements back to top special effect

The above is the detailed content of JavaScript simply returns to the top code and comments. For more information, please follow other related articles on the PHP Chinese website!