我有一个jQuery平滑滚动脚本:
$(".scroll").click(function(event){
event.preventDefault();
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
$('html,body').animate({scrollTop:dest}, 500,'swing');
});
滚动到
<a id="info"></a>
但不适用于我的任何其他人
<a id="top"></a>
<a id="bottom"></a>
<a id="announcements"></a>
etc ...
手动添加domain.com/#top时,它可以正常工作,因此锚点应该没问题。
有谁知道为什么?
答案 0 :(得分:1)
您的按钮上下都没有课程scroll
。尝试添加它。
<a href="top" class="scroll" /><!-- img --></a>
然后确定a
会触发事件:
$("a.scroll").click(function(event){
//your code there
});
答案 1 :(得分:1)
问题是你设置点击“滚动”类。 click事件需要设置为父级。
$(".scroll").parent().click(function(event){
event.preventDefault();
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
$('html,body').animate({scrollTop:dest}, 500,'swing');
});
答案 2 :(得分:0)
这是一个jsfiddle:This works。
JQuery:
$(".scroll").click(function(event){
var target = $(this).hash;
var dest=null;
if(($(this.hash).offset().top) > ($(document).height()-$(window).height())){
dest= $(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
$('html,body').animate({scrollTop:dest}, 1000, 'swing');
event.preventDefault();
});