Home > Developer > Web Develop
<body>
<a href="B.html#pos" target="_blank"> click Jump </a> <body>Then define this anchor point on page b.<body>
...here is a lot of text, put the page open, hang out the scroll bar...<a name="pos"> scroll here </a> ...add more Text ....</body>Okay, test, ok!. "Scroll Here" appears at the top of the browser after the dot has passed. The actual situation is often the production staff cut the page, the product suddenly said to add a function, need to scroll to a place, but that place is a div, and there is no anchor point, create an anchor point will occupy the space of the page, affecting the layout of the page, how to do? We create a hidden anchor point and try to hide the anchor point without occupying space. Continue: If I let the b page <a name= "pos" > Scroll to Here </a> does not display, is set display:none; So can you scroll down here? Give it a try<body>
...here is a lot of text, put the page open, hang out the scroll bar...<a name="pos" style="display:none;" > Scroll to here </a> Hide and scroll to here...add more Text ....</body>Bad, ie can work, Firefox is a bit face. Can only change one idea, assign an ID to the anchor point can scroll here? Give it a try<body>
...here is a lot of text, put the page open, hang out the scroll bar...<a id="pos"> scroll here </a> Hide and scroll to here...add more Text ....</body>OK, Success! It looks like it's a good idea to change the ID, now let's change the anchor to Div.<body>
...here is a lot of text, put the page open, hang out the scroll bar...<div id="pos"> scroll here </div> Hide and scroll to here...add more Text ....</body>OK, Success! This solves the problem, does not need to insert a <a></a> anchor point, only need to give the div to add an ID on the line.next solve the second requirement, click on an element inside the B page and scroll to the specified position. First, create an anchor point at the top of the b.html, pointing to the div you want to scroll<body>
<a href="#pos"> click here to jump </a> ...here is a lot of text, put the page open, hang out the scroll bar...<div id="pos"> scroll here </div> Hide and scroll to here...add more Text ....</body>OK, Success! What if you want to click a button to scroll to the specified position? button buttons can not add href, only zigzag solution. First create a hidden anchor point, and then click on the button to add an onclick event, and then through the JS to invoke the anchor point click Event, the curve to salvation.<body>
<script type="Text/javascript"> function click_scroll() { document. getElementById("Anchor_scroll"). Click(); } </script> <input type= "Button" value= "click button Jump" onclick= "click_ Scroll /> <a id="Anchor_scroll" href= "#pos" style="display :None"> click here to jump to </a> ...here is a lot of text, put the page open, hang out the scroll bar...<div id="pos"> scroll here </div> Hide and scroll to here...add more Text ....</body>OK, Success! Since button can be successful, the other is good, img,div can do so. There is also a way to do it through the Aminate animation method of jquery, I post the code<body>
<script type="Text/javascript"> function click_scroll() { var scroll_offset = $("#pos"). Offset(); //Get POS This div layer offset, contains two values, top and left $ ("body,html"). Animate ({ scrollTop:scroll_offset.top //Let the body scrolltop equal to the top of the POS, it implements the scrolling },0); } </script> <input type="button" value="click button to jump" onclick=" click_scroll();" /> ... here is a lot of text, put the page open, hang out the scroll bar...<div id="pos"> scroll here </div> Hide and scroll to here...add more Text ....</body>Js,jquery scrolling/Jumping page to the specified location
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
