在WordPress中使用jQuery scrollTop吗？

Question

因此，我正在尝试使用jQuery动画来制作带有wordpress主题的“从顶部滚动”按钮。 我在这里已经好几个小时了，没有运气。 这是JS的代码段：

 < script type = "text/javascript" > (function ($) {
        $(document).ready(function () {
            $("#back-top").hide();
            $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 100) {
                        $('#back-top').fadeIn();
                    } else {
                        $('#back-top').fadeOut();
                    }
                });
                $('#back-top a').click(function () {
                    $('body,html').animate({
                        scrollTop : 0
                    }, 800);
                    return false;
                });
            });
        });
    });
(jQuery);
<  / script >

这是我的标记：

<p id="back-top"><a href="#top">&uarr;</a></p>

值得注意的是，在前面提到的JS代码段之前，jQuery和其他垃圾邮件被称为几行。

<script type='text/javascript' src='http://tambnguyen.com/wp-includes/js/prototype.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://tambnguyen.com/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://tambnguyen.com/wp-includes/js/scriptaculous/effects.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://tambnguyen.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

请告诉我我在做什么错。 谢谢！

Answer 1

甜！ 我能够对其他地方的其他一些片段进行反向工程。 现在可以使用了。

 <script type="text/javascript"> jQuery(function () {
        jQuery(document).ready(function () {
            jQuery("#back-top").hide();
            jQuery(function () {
                jQuery(window).scroll(function () {
                    if (jQuery(this).scrollTop() > 100) {
                        jQuery('#back-top').fadeIn();
                    } else {
                        jQuery('#back-top').fadeOut();
                    }
                });
                jQuery('#back-top a').click(function () {
                    jQuery('body,html').animate({
                        scrollTop : 0
                    }, 800);
                    return false;
                });
            });
        });
    });
</script>

无论如何，谢谢您的帮助：）

Answer 2

使用event.preventDefault

jQuery('#back-top').click(function() {
    jQuery('html,body').animate({
        scrollTop: 0
    }, 800);
    return false;
});​