javascript - 网站无法正常工作的向上滚动按钮

Question

我想在我的网站上放置一个“向上滚动”按钮，但由于某种原因它无法正常工作。该按钮确实出现在页面上，但无论出于何种原因，每当我尝试单击它时，它只会将我重定向到该站点的首页。我不知道我做错了什么。

<script> 
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); 
$(function(){$("#toTo_button").scrollToTop();}); 
</script> 
<style> 
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; } 
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); } 
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } 
</style> 
<div id="ups"> 
<a href="/" id="toTo_button"><img src="http://full4dl.ucoz.com/Support/ups.png" alt="" /></a> 
</div>

Answer 1

您必须阻止单击 anchor 时的默认操作，如 <a href="/" ...肯定会重定向到主页:

$(function () {
    $.fn.scrollToTop = function () {
        $(this).hide().removeAttr("href");
        if ($(window).scrollTop() >= "100") {
            $(this).fadeIn("slow")
        }
        var scrollDiv = $(this);
        $(window).scroll(function () {
            if ($(window).scrollTop() <= "1000") {
                $(scrollDiv).fadeOut("slow")
            } else {
                $(scrollDiv).fadeIn("slow")
            }
        });
        $(this).click(function (e) {
            e.preventDefault();         // ding ding ding
            $("html, body").animate({
                scrollTop: 0
            }, "slow")
        })
    }
});
$(function () {
    $("#toTo_button").scrollToTop();
});