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和其他junks被称为几行。

<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;
});

在Wordpress上使用jQuery scrollTop？

2 个答案: