Smooth jump of page anchor points made by jquery

A long time ago, I saw a European and American website as a horizontal version, which is very wide and thunderous. However, the smooth jump effect of the anchor makes the entire browsing experience quite pleasant. Many large websites in China usually have vertical pages, which are very tiring. Therefore, they also use the smooth effect of the anchor to reduce the browsing burden. To sum up, let's get a more exciting effect, and support the smooth jump effect of the horizontal and vertical versions of the anchor.

It looks very powerful. It's actually a little louder. Why? Because jquery is used, the code is naturally very simple.

Demo address: lazy Novels

First, let's look at how to call:

1 $ (Document). Ready ( Function (){
2 $ ( " . Gotop " ). Anchorgowhere ({target: 1 });
3 $ ( " . Godown " ). Anchorgowhere ({target: 1 });
4 $ ( " . Gonext " ). Anchorgowhere ({target: 1 });
5 $ ( " . Gofront " ). Anchorgowhere ({target: 1 });
6 $ ( " . Govertical " ). Anchorgowhere ({target: 2 });
7 });

$ ("... ") Indicates that the label of the class is obtained through the style name. The style name does not have a specific style definition (or can be defined according to actual needs), just to facilitate searching for similar labels. Anchorgowhere is the implementation method of anchorgowhere jump. The target parameter in it is the jump type. If it is 1, it is vertical; if it is 2, it is horizontal.

Starting Point of the anchor:

1 < A Href = "# Menu1" Class = "Godown" > Menu 1 </ A >
2 < A Href = "# Menu2" Class = "Gonext" > Lazy, click here to read Chapter 2 </ A >
3 < A Href = "# Menu1" Class = "Gofront" > Why? I forgot the previous chapter? </ A >
4 < A Href = "# Right" Class = "Govertical" > I haven't seen it yet. I'll show you to the right- & Gt; </ A >
5 < A Href = "# Body" Class = "Gotop" > Back to Top </ A > </ Span >

Anchor destination:

< Legend ID = "Menu1" > Menu 1 </ Legend >
< Body ID = "Body" >

Starting from "anchor point" and "anchor point"CodeAs you can see, all the code is usually set as an on-page anchor. We didn't impose unnecessary configuration code because of smooth expansion. At the same time, when the page JS fails, these anchors can still be redirected by default. This is more or less in line with the JS programming principles of the reserved backend.

Finally, let's take a look at the completeProgramCode:

1 Jquery. FN. anchorgowhere =   Function (Options ){
2 VaR OBJ = Jquery ( This );
3 VaR Ults = {Target: 0 , Timer: 1000 };
4 VaR O = Jquery. Extend (defaults, options );
5 OBJ. Each ( Function (I ){
6 Jquery (OBJ [I]). Click ( Function (){
7 VaR _ REL = Jquery ( This ). ATTR ( " Href " ). Substr ( 1 );
8 Switch (O.tar get ){
9 Case   1 :
10 VaR _ Targettop = Jquery ( " # " + _ Rel). offset (). Top;
11 Jquery ( " HTML, body " ). Animate ({scrolltop: _ targettop}, O. Timer );
12 Break ;
13 Case   2 :
14 VaR _ Targetleft = Jquery ( " # " + _ Rel). offset (). Left;
15 Jquery ( " HTML, body " ). Animate ({scrollleft: _ targetleft}, O. Timer );
16 Break ;
17 }
18 Return   False ;
19 });
20 });
21 };

Is it easy? In fact, there are a lot of code such as smooth jump of anchor on the Internet. However, it is easy to write according to your actual needs. This demo passed the test in firefox3, opera9, IE6/7/8, and safari4. My friend tested Chrome but I didn't see it at the moment. If anyone knows the reason, please let me know.

Demo address: lazy Novels