[英]jQuery smooth scroll doesn't change URL
一切都按预期工作,但是当jQuery到位时,URL不会改变。 反正有没有平滑滚动并同时更改网址? 在此之前我尝试了一种不同的方法,但它并不像这样兼容浏览器。
我的HTML是:
<li class="representing-you-online"><a href="#representing-you-online">Representing you online</a></li>
<li class="developing-your-people"><a href="#developing-your-people">Developing your people</a></li>
我的jQuery是:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
return false;
});
});
$(document).ready(function(){
$('#logo a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
谢谢!
替换锚点的点击处理代码,如下所示:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
var hash = this.hash;
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500, function (){
location.hash = hash;
});
return false;
});
});
请注意jquery .animate()末尾的完整函数。 它会更改URL。
请在此处查看演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.