Home > Developer > JavaScript
Two requirements must be met:
One is to jump from page A to page B and scroll to any place on the page;
The second is to click an element inside page B to scroll to any place on the page;
How can this problem be solved? It's very easy, of course, to use an anchor.
First, create an anchor on page.
<Body>
<A href = "B .html # pos" target = "_ blank"> click to jump </a>
<Body>
Then define the anchor on page B.
<Body>
...
There are a lot of text here, to open the page and support the scroll bar
...
<A name = "pos"> scroll here </a>
...
Add more text
...
</Body>
Okay, test, OK! Click "scroll here" to appear at the top of the browser.
The actual situation is often when the production personnel cut the page, the product suddenly said to add a function, need to scroll to a certain place, but that place is a div, there is no a anchor,
Creating an anchor occupies the space of the webpage and affects the webpage layout. What should I do? Try to create a hidden anchor. The hidden anchor does not occupy space.
Continue: If I have <a name = "pos"> scroll here </a> On page B not displayed, set display: none; so can we scroll here? Try
<Body>
...
There are a lot of text here, to open the page and support the scroll bar
...
<A name = "pos" style = "display: none;"> scroll here </a>
Hide and scroll here
...
Add more text
...
</Body>
Poor, IE can work, Firefox does not give face.
You can only use another method. Can you specify an id for the anchor to scroll here? Try
<Body>
...
There are a lot of text here, to open the page and support the scroll bar
...
<A id = "pos"> scroll here </a>
Hide and scroll here
...
Add more text
...
</Body>
OK, success! It seems that it is a good way to change to id. Now try changing the anchor to div.
<Body>
...
There are a lot of text here, to open the page and support the scroll bar
...
<Div id = "pos"> scroll here </div>
Hide and scroll here
...
Add more text
...
</Body>
OK, success! This solves the problem. You do not need to insert a <a> </a> anchor. You only need to add an id to the div.
Next, we will solve the second requirement. Click an element in page B and scroll to the specified position.
First, create an anchor at the top of B .html to point to the div to be rolled
<Body>
<A href = "# pos"> click here to jump to this page </a>
...
There are a lot of text here, to open the page and support the scroll bar
...
<Div id = "pos"> scroll here </div>
Hide and scroll here
...
Add more text
...
</Body>
OK, success! What if you want to click a button to scroll to the specified position? You cannot add href to the button, but you can only perform twists and turns.
Create a hidden anchor, add an onclick event when you click the button, and call the anchor's click event through js to save the country.
<Body>
<Script type = "text/javascript">
Function click_scroll (){
Document. getElementById ("anchor_scroll"). click ();
}
</Script>
<Input type = "button" value = "click button to jump to" onclick = "click_scroll ();"/>
<A id = "anchor_scroll" href = "# pos" style = "display: none"> click here to jump to this page </a>
...
There are a lot of text here, to open the page and support the scroll bar
...
<Div id = "pos"> scroll here </div>
Hide and scroll here
...
Add more text
...
</Body>
OK, success! Now that the button is successful, you can do anything else. img and div can do this.
There is also a way to do this through jQuery's aminate animation method. I post the code
<Body>
<Script type = "text/javascript">
Function click_scroll (){
Var scroll_offset = $ ("# pos"). offset (); // obtain the offset of the pos div layer, which contains two values: top and left.
$ ("Body, html"). animate ({
ScrollTop: scroll_offset.top // set the scrollTop of the body to the top of the pos to implement scrolling.
}, 0 );
}
</Script>
<Input type = "button" value = "click button to jump to" onclick = "click_scroll ();"/>...
There are a lot of text here, to open the page and support the scroll bar
...
<Div id = "pos"> scroll here </div>
Hide and scroll here
...
Add more text
...
</Body>
OK, success! The advantage of this method is to control the rolling speed. The blue 0 above controls the speed, and 0 immediately means to set it to 1000,
We can see that it is slowly rolling to the pos. If it is set to 5000, it will be slower.
Why? Because jQuery's animation is used for animation, more functions 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
