Js jquery to scroll and jump page to the specified location

To address two requirements:

One is to go from page A to page B and scroll to anywhere on the page.
The second is to click on an element inside the B page and scroll to anywhere on the page.

How to solve it? It's very simple. Anchor points, of course.

Start by creating an anchor on page A

< Body>
< A href = "b.h tml# pos" target = "_blank" > Click jump < / a>
< Body>

Then define the anchor on page B

< Body>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< A name = "pos" > Scroll over here < / a>
.
A little bit more text
.
< / body>

OK, test, OK! The "scroll to here" appears at the top of the browser after clicking through.
What happens is often the page is cut by the producer, and all of a sudden the product says it's going to add a feature, it's going to scroll to some place, but that place is a div, it doesn't have an a anchor,
Creating an anchor will take up space and affect the layout of the page. Let's try to create a hidden anchor. The hidden anchor does not take up space.

Continue: if I let the < A name = "pos" > Scroll over here < / a> If it doesn't, then we're going to set display:none; So can I scroll all the way to here? Have a try

< Body>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< A name = "pos" style = "display: none;" > Scroll over here < / a>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

Not good, IE works, firefox is a bit of a disgrace.
I can think of it another way, I can give an id to the anchor can I scroll to here? Have a try

< Body>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< A id = "pos" > Scroll over here < / a>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

OK, success! It seems that id is a good idea, now change the anchor to div

< Body>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< Div id = "pos" > Scroll over here < / div>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

OK, success! This solves the problem without inserting an ampersand; A> < / a> Anchor point, you just need to give div an id.

Next, to solve the second requirement, click on an element inside the B page and scroll to the specified location.
First, create an anchor at the top of the b.html that points to the div you want to scroll

< Body>
< A href = "# pos" > Click here to jump to this page. / a>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< Div id = "pos" > Scroll over here < / div>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

OK, success! What if you want to click a button to scroll to the specified location? The button button cannot add href, it can only be tortuous.
Create a hidden anchor, then add an onclick event when you click the button, and then call the click event of the anchor via js to save the curve.

< Body>
< The script type = "text/javascript" >
The function click_scroll () {
Document. The 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 this page. / a>
.
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< Div id = "pos" > Scroll over here < / div>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

OK, success! Now that the button works, the rest is easy, img, div.

There's another way you can do it with jQuery's aminate animation method, and I'll post the code

< Body>
< The script type = "text/javascript" >
The function click_scroll () {
Var scroll_offset = $(" # pos "). Offset (); // get the offset of pos div layer, including two values, top and left
$(" body, HTML "). The animate ({
ScrollTop :scroll_offset. Top // make the scrollTop of the body equal to the top of the pos, and the scrolling is realized
}, 0);
}
< / script>
< Input type="button" value=" click button jump "onclick="click_scroll();" / > .
There's a lot of text here, and I'm going to push the page out, and I'm going to push the scroll bar out
.
< Div id = "pos" > Scroll over here < / div>
And then I'm going to scroll over here
.
A little bit more text
.
< / body>

OK, success! One of the advantages of this method is that it controls the speed of the roll, the blue zero on the top controls the speed, zero means immediately, so let's try 1000,
You can see that it rolls slowly to pos. If it is set to 5000, it will be even slower.
Why is that? Since jQuery animate is intended for animation, more can be done in detail.