To address two requirements:
One is to jump from page A to page B, scroll to anywhere on the page;
The second one is to click an element inside the B page and scroll to any place on the page.
How to solve it? It's simple, of course, with anchor points.
First create an anchor point on page A
<body>
<a href= "B.html#pos" target= "_blank" > click Jump </a>
<body>
Then define this anchor point on page b
<body>
...
Here are a lot of text, put the page open, hold out the scroll bar
...
<a name= "pos" > Scrolling to Here </a>
...
Add more Text
...
</body>
Okay, test, ok!. The point past is not "scrolling here" appears at the top of the browser.
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 a anchor point,
The creation of an anchor point will occupy the space of the Web page, affecting the layout of the page, this How to do? We create a hidden anchor point to try, and the hidden anchor points do not occupy space.
Continue: If I let the b page <a name= "pos" > Scrolling here </a> does not show, is set display:none; So you can still scroll here? Give it a try.
<body>
...
Here are a lot of text, put the page open, hold 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 a bit do not face.
Can only change a way of thinking, to the anchor point to specify an ID can scroll here? Give it a try.
<body>
...
Here are a lot of text, put the page open, hold out the scroll bar
...
<a id= "pos" > Scrolling to Here </a>
Hide and scroll to here
...
Add more Text
...
</body>
OK, Success! It seems to change the ID is a good way, now put the anchor point for Div try
<body>
...
Here are a lot of text, put the page open, hold out the scroll bar
...
<div id= "pos" > Scrolling to 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 Div an ID on the line.
Next solve the second requirement, click an element inside the B page and scroll to the specified position.
First, create an anchor point at the top of the b.html and point to the div that you want to scroll.
<body>
<a href= "#pos" > click here Page Jump </a>
...
Here are a lot of text, put the page open, hold out the scroll bar
...
<div id= "pos" > Scrolling to Here </div>
Hide and scroll to here
...
Add more Text
...
</body>
OK, Success! What if you want to click on a button button to scroll to the specified position? button buttons cannot add href and can only be resolved in twists and turns.
First set up a hidden anchor point, and then click button to add an onclick event, and then through JS to call the anchor point click Event, Curve Save the nation.
<body>
<script type= "Text/javascript" >
function Click_scroll () {
document.getElementById ("Anchor_scroll"). Click ();
}
</script>
<input type= "button" value= "click button to jump" onclick= "click_scroll ();"/>
<a id= "Anchor_scroll" href= "#pos" style= "Display:none" > click here Page Jump </a>
...
Here are a lot of text, put the page open, hold out the scroll bar
...
<div id= "pos" > Scrolling to Here </div>
Hide and scroll to here
...
Add more Text
...
</body>
OK, Success! Since the button can be successful, then the other is good to do, img,div can do so.
There is also a way to do it through JQuery's Aminate animation method, and I post the Code
<body>
<script type= "Text/javascript" >
function Click_scroll () {
var Scroll_offset = $ ("#pos"). Offset (); To get the offset of this div layer of POS, contains two values, top and left
$ ("body,html"). Animate ({
ScrollTop:scroll_offset.top//Let the body's scrolltop equal to the top of the POS, you realize the scrolling
},0);
}
</script>
<input type= "button" value= "click button to jump" onclick= "click_scroll ();"/>
Here are a lot of text, put the page open, hold out the scroll bar
...
<div id= "pos" > Scrolling to Here </div>
Hide and scroll to here
...
Add more Text
...
</body>
OK, Success! The advantage of this method is to control the speed of the scroll, the blue 0 above is the control speed, 0 is the immediate meaning, that set to 1000 try,
Can see is slowly rolling to the POS, if set to 5000, it will be more slow.
Why is that? Because the animate of jquery is originally used for animation, more multi-functional can be studied in detail.
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
