JQUERY scrollTop无法正常工作

时间:2014-05-16 18:20:26

标签: javascript jquery

所以我有这个jquery代码

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 50) {
        $('.top-bottom').fadeIn();
    } else {
        $('.top-bottom').fadeOut();
    }
});
$('.go-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 300);
});
$('.go-bottom').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 300);
});

我将它与这个HTML块相关联

<div class="top-bottom">
    <a href="#" class="go-top"><img src="images/image.png" class="arrow"></a>
    <a href="#" class="go-bottom"><img src="images/image.png" class="arrow"></a>
</div>

图像上的类箭头是这样我可以调整它的大小但基本上我想要它所以当我向下滚动go-top和go-bottom时,它们正在做,但是当我点击时,我想要它go-top或go-bottom它或者分别将我带到页面的顶部或底部,现在我遇到了问题,每当我点击图像时它就会重新加载页面#添加到它上面。任何人都知道我做错了什么,我一直试图在整个下午弄清楚它并且似乎无法解决它,这可能是一个愚蠢的错误我和#39;已经制作或者实际上可能非常复杂谁知道,但如果有人能帮助我,我将不胜感激。

编辑:http://jsfiddle.net/3v6yy/这基本上是我的网站,我不知道我做错了什么以及为什么这不起作用,箭头图像通常出现在我看看我的原始文件,但由于某些原因他们没有出现在这里,如果有人知道如何制作我想要的效果(当你从顶部滚动几个像素时,两个箭头都会淡入,甚至可能在他们&#时消失它们# 39;重新在底部,当你点击它们时,它们将你带到页面的顶部或底部,这取决于什么按钮)如果你能帮助我,我将非常感激,我&#39;我不是专业人士,这是一个学校项目,我真的很想做好,所以除了完成工作之外,它必须同时简单,所以我能理解基本上是什么

1 个答案:

答案 0 :(得分:0)

删除&#39;#&#39;来自href属性。

<div class="top-bottom">
   <a href="" class="go-top"><img src="images/image.png" class="arrow"></a>
   <a href="" class="go-bottom"><img src="images/image.png" class="arrow"></a>
</div>

由于你的JQuery功能只是点击事件,所以不需要&#39;#&#39;标签