So SOF,
我遇到了一个小问题,当我在使用页面锚点时单击链接时,我不希望#BOT
出现在我的 url 中。
爪哇语
$("a.bottom").click(function() {
window.location = '#BOT';
});
不同的链接...
<a class="bottom" href="javascript: void(0);">BOTTOM</a>
<a href="#BOT">BOTTOM</a>
锚
<a id="KEY"></a>
如何阻止它在页面网址栏中添加#BOT
?
jQuery scrollTo 插件非常擅长这一点。它会将窗口滚动到一个元素,而无需使用锚点:
$("a.bottom").click(function() {
$.scrollTo($("a[name='#BOT']"));
});
最好使功能更通用:
jQuery
$("a.scrollable").click(function() {
$.scrollTo($("#"+$(this).data("scrollto")));
});
.HTML
<a class="scrollable" data-scrollto="BOT">BOTTOM</a>
<a id="BOT"></a>
<a class="scrollable" data-scrollto="KEY">BOTTOM</a>
<a id="KEY"></a>
这可以使用jQuery偏移量和动画来完成,如本问题中所述
function scrollToAnchor(aid) {
var aTag = $("a[id='" + aid + "']");
$('html,body').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("a.bottom").click(function () {
scrollToAnchor('BOT');
});
在这里摆弄
您可以使用window.scrollTo(x,y)
方法滚动页面。不需要刷新页面。
例如:
$("a.bottom").click(function() {
scrollTo(0,100);
});