我有一个导航,初始网址如下所示：
我的页面上有链接,如此< a href =“#section-1”>第1节< / a>< a href =“#section-2”>第2节< / a>< a href =“#section-3”>第3节< / a>
有3个部分：
<section id="section-1"></section><section id="section-2"></section><section id="section-3"></section>
我正在使用此jquery代码从页面顶部(或用户在页面上的位置)滚动到该部分到该部分的顶部,而不是在我的网址中显示#标记.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
},2000);
return false;
}
}
});
});
我的问题是这不会滚动到该部分.它只是转到该部分的底部,然后滚动到顶部,#出现在我的网址中.
我的主页上有另一个菜单：
home.PHP和我使用完全相同的jquery代码,它适用于该页面.
我的问题是我怎么让ScrollTop在我的test.PHP？query = 19页面上工作就像在home.PHP上一样当我在test.PHP上点击一样？query = 19我的url改为：test. PHP？查询= 19#部-1
解决方法
1.使用e.preventDefault();防止您的代码在当前网址中添加#
HTML：
<div id = 'a' style = 'height:300px;'> 123 </div> <a href= '#b'>Go to 456 </a> <div id = 'b' style = 'height:300px;' > 456 </div> <a href= '#c'>Go to 789 </a> <div id = 'c'style = 'height:300px;' > 789 </div> <a href= '#d'>Go to asd </a> <div id = 'd' style = 'height:300px;' > asd </div> <a href= '#e'>Go to fgh </a> <div id = 'e' style = 'height:300px;' > fgh </div> <a href= '#a'>Go to 123 </a>
脚本：
function scroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
},2000);
}
$(document).ready(function() {
$('a[href*=#]:not([href=#])').click(function (e) {
var id = $(this).attr('href')
scroll(id);
e.preventDefault();
});
});
