Experience Effect:
http://hovertree.com/texiao/jquery/49/
:
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1" /><title>jquery Anchor Point Scrolling navigation menu-what to ask</title><Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/49/css/reset.css"><Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/49/css/menu.css"><Scripttype= "Text/javascript"src= "Http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></Script><Scripttype= "Text/javascript"src= "Http://hovertree.com/texiao/jquery/49/js/menu.js"></Script></Head><Body><DivID= "Menu"><ul><Li><ahref= "#item1"class= "cur">One</a></Li><Li><ahref= "#item2">Both</a></Li><Li><ahref= "#item3">Three</a></Li><Li><ahref= "#item4">Four</a></Li><Li><ahref= "#item5">Five</a></Li></ul></Div><DivID= "Content"><Divclass= "Item"ID= "Item1"><H1>1F</H1><H1>jquery Anchor point Scrolling navigation menu</H1><ahref= "Http://hovertree.com/h/bjaf/2slij8q4.htm"Target= "_blank">Original</a><ahref= "Http://hovertree.com"Target= "_blank">Home</a><ahref= "http://hovertree.com/texiao/"Target= "_blank">Effects</a><BR/>Click on the right side to navigate or scroll the mouse to see the effect. </Div><Divclass= "Item"ID= "Item2"><H1>2F</H1></Div><Divclass= "Item"ID= "Item3"><H1>3F</H1><imgsrc= "Http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg" /></Div><Divclass= "Item"ID= "Item4"><H1>4F</H1><imgsrc= "Http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg"alt= "Battle" /></Div><Divclass= "Item"ID= "ITEM5"><H1>5F</H1><imgsrc= "Http://hovertree.com/hvtimg/bjafjd/xusm0re6.jpg"alt= "Beauty" /></Div></Div></Body></HTML>
Transferred from: http://hovertree.com/h/bjaf/2slij8q4.htm
Reference: hovertree.com/code/jquery/nqgp4xcl.htm
More Effects: http://www.cnblogs.com/roucheng/p/texiao.html
jquery page scrolling right floating navigation toggle