Click the JQ + anchor icon to return to the top of the page.

Click the JQ + anchor icon to return to the top of the page.

Today, I want to write a frequently used page [Click back to the top of the page or the function of the homepage]. In the same way as in the workplace, there will always be a low point, at this time, we also should not commit, do not commit, do not commit, say three times! That's not the case. If my job is gone, I will try again. Just like on the day of my team disband last Friday, I walked with a smile and waved and smiled. What is that? Although Buddha closed a door for you, it may open another window for you. I will change my job tomorrow. I would like to thank my classmates.

A) let's take a look at the implementation. The implementation is very simple. When the scroll bar scroll down is determined by JQ to show the icon [back to the top + back to the home page] (for another understanding: the distance between the top of the scroll bar and the top of the page). Another method is to use the anchor to mark a position. When an event is activated, return it to this position.

B) When JQ is used to determine the length of the scroll bar to scroll down to a greater value, this method can also be used for automatic page loading... that is, if you keep rolling, the data will not be loaded... user Experience is good. [write as soon as you have time]

 

1) First, write the DOM structure and CSS style sheets.

1/* HTML */2 <div style = "width: 100%; height: 3000px;"> 3 <! -- This p tag with ID is called the anchor tag and is placed at the top of the page. Objective: To prevent code from being ineffective (for example, this is not supported by the browser of the class library version), click back to the top, you can still implement --> 4 <p id = "pageTop"> </p> 5 <section id = "top_sec" class = "top_sec"> 6 <a href = "# pageTop" id = "goPageTop"> </a> 7 <a href = "#" id = "goPageHome"> </a> 8 </section> 9 </ div>

 1 /* CSS */ 2 　　　　　　.top_sec { 3                 position: fixed; 4                 bottom: 74px; 5                 right: 12px; 6                 width: 42px; 7                 z-index: 999; 8                 display: none; 9             }10             11             #goPageTop {12                 width: 42px;13                 height: 42px;14                 margin-bottom: 10px;15                 border-radius: 50%;16                 background: url(img/go_top_icon.png) no-repeat 0 0;17                 background-size: 42px auto;18                 display: block;19             }20             21             #goPageHome {22                 width: 42px;23                 height: 42px;24                 position: relative;25                 border-radius: 50%;26                 background: url(img/go_home_icon.png) no-repeat 0 0;27                 background-size: 42px auto;28                 display: block;29             }

 

2) Let's look at the implementation code.

1
<Script type = "text/javascript" src = "js/jquery-1.8.3.min.js"> </script>
<Script type = "text/javascript"> 2/* return to the top */3 $ (function () {4 $ (function () {5 $ (window ). scroll (function () {6/* determines the scroll bar is 100 away from the top of the page. You can customize */7 if ($ (window ). scrollTop ()> 100) {8 $ ("# top_sec "). fadeIn (100);/* used here. show () can also be too ugly */9} else {10 $ ("# top_sec "). fadeOut (100); 11} 12}); 13}); 14/* Events bound to the image element back to the top */15 $ (function () {16 $ ("# goPageTop "). on ("click", function () {17 $ ('body, html '). animate ({18 scrollTop: 019}, 1000); 20 return false; 21}); 22}); 23}); 24 </script>

 

3) this is

 

Conclusion: Check whether the JQ class library is referenced. I think everything I write is very simple, and there may be no need to write it at all. However, in a process of learning front-end development, it is necessary for me to record this process with words. Gradually, this process records more things. Tomorrow is a new day. My new job...