[英]How can I achieve “jumps” with jquery?
我正在开发一个网站,该网站根据用户单击的菜单图标加载不同的页面。 我和一个朋友写了这个javascript函数:
function loadPage(targetURL){
$.get( targetURL, function( data ) {
document.getElementById("placeholder").innerHTML=data;
window.scrollTo(0,0);
});
}
菜单图标的编码如下:
<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage.php')"/>
它非常有用,除非尝试跳转到特定的div ID。 例如,
<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage#someLocationOnPage.php')"/>
取出.scrollTo(0,0)不能解决问题。 我放入该行以确保在更改页面时页面一直向上滚动(否则,如果您位于页面中间,并单击菜单图标,则新页面将显示在页面中间)。
我错过了什么? 如何获取链接以跳转到div ID?
这两个网址没有不同。 带有书签的代码只会获得相同的HTML代码。 由于您没有告诉浏览器转到特定的书签,因此它应该显示相同的信息。 (当然,除非您的服务器为该链接发送了不同的信息)
我想您必须手动将视图移动到所需的书签。
function loadPage(targetURL, targetID){
$.get( targetURL, function( data ) {
document.getElementById("placeholder").innerHTML=data;
if(targetID && $("#"+targetID).length != 0){
$(document).scrollTop($("#"+targetID).offset().top);
}
else {
window.scrollTo(0,0);
}
});
}
然后将目标的ID作为另一个参数。 如果不可能,您也可以在网址中搜索#
并找到ID /或锚点。
首先,您应该在代码中保留window.scrollTo(0,0)
,以使页面在每次单击菜单项时都位于顶部。
其次,如果点击正在调用的菜单图标
loadPage('pages/somePage#someLocationOnPage.php')
您的意图是打开'somePage'并滚动到元素ID为'someLocationOnPage.php'的位置,然后应更新loadPage方法以检查'#'之后的部分。
function loadPage(targetURL){
$.get( targetURL, function( data ) {
document.getElementById("placeholder").innerHTML=data;
window.scrollTo(0,0);
// Grab url part after '#'
var name = targetURL.substr( href.indexOf('#') + 1 ), target = $('a[name='+ name +']'), target2 = $('#' + name);
// Determine of bookmark is available or not
target = (target.length)? target : target2;
// Scroll to the bookmark
$('html,body').animate({
scrollTop: target.offset().top
},400);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.