>웹 프론트엔드 >JS 튜토리얼 >jquery를 기반으로 한 페이지에서 다른 페이지의 지정된 위치로 이동하는 구현 코드(부드러운 이동 효과 포함)_jquery

jquery를 기반으로 한 페이지에서 다른 페이지의 지정된 위치로 이동하는 구현 코드(부드러운 이동 효과 포함)_jquery

WBOY
WBOY원래의
2016-05-16 18:06:321396검색

예를 들어 mao.aspx 페이지에서 div id="s" 위치로 이동하려면 를 사용하여 지정된 위치로 이동하세요
이제 사용자를 추가하려면 페이지로 점프한 후 해당 위치로 원활하게 이동하는 방법은 실제로 매우 간단합니다. 점프하려는 div의 매개변수를 전달하기만 하면 됩니다.
먼저 이전 페이지로 이동합니다. 매개변수에 대한 일반 js 가져오기

코드 복사 코드는 다음과 같습니다.

//Get 매개변수 이름 pname에 따른 매개변수가 원하는 매개변수 이름과 같습니다
function getParam(pname) {
var params = location.search.substr(1); // 매개변수를 가져오고 제거하시겠습니까?
var ArrParam = params.split('&');
if (ArrParam.length == 1) {
//매개변수가 하나만 있는 경우
return params.split('=' ) [1]
}
else {
//여러 매개변수의 경우
for (var i = 0; i < ArrParam.length; i ) {
if (ArrParam [i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1]
}
}
}
}

코드는 매우 간단합니다. 현재 URL을 기반으로 원하는 매개변수의 값을 가져옵니다.
코드 복사 코드는 다음과 같습니다.

$(function() {
var mao = $("#" getParam("m")); //Get 앵커 포인트
if ( mao.length > 0) {//객체가 존재하는지 확인
var pos = mao.offset().top; var poshigh = mao.height()
$("html,body" ).animate({ scrollTop: pos-poshigh-30 }, 3000);
}
})

위는 부드러운 움직임입니다. pos-poshigh-30 으로 조절하시면 될 것 같아요~~ 30으로 줄이는게 좋을 것 같아요~~

아주 간단하고 코드예제만큼 효과는 좋지 않네요. 직접 써보세요~
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.