Home > Web Front-end > JS Tutorial > body text

Implementation code for jumping from one page to a specified position on another page based on jquery (with smooth movement effect)_jquery

WBOY
Release: 2016-05-16 18:06:32
Original
1353 people have browsed it

For example, if you want to jump to the position of div id="s" on the mao.aspx page, just use to jump to the specified position
Now in order to add users How to experience jumping to the page and then smoothly moving to the position? It is actually very simple. Just pass a parameter of which div you want to jump to
First, go to the previous page to get the general js for parameters

Copy code The code is as follows:

//Get the parameter according to the parameter name pname is equal to the desired parameter name
function getParam(pname) {
var params = location.search.substr(1); // Get the parameters and remove them?
var ArrParam = params.split('&');
if (ArrParam.length == 1) {
//When there is only one parameter
return params.split('=') [1];
}
else {
//The case of multiple parameters
for (var i = 0; i < ArrParam.length; i ) {
if (ArrParam [i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1];
}
}
}
}

The code is very simple: get the value of the desired parameter based on the current url
Copy the code The code is as follows:

$(function() {
var mao = $("#" getParam("m")); //Get the anchor point
if ( mao.length > 0) {//Determine whether the object exists
var pos = mao.offset().top;
var poshigh = mao.height();
$("html,body" ).animate({ scrollTop: pos-poshigh-30 }, 3000);
}
});

The above is smooth movement to the desired position pos-poshigh-30 This can be adjusted. I think it is better to reduce it to 30~~

It is very simple and the effect is not as good as the code example. I can write it by myself~
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template