在Wordpress中使用jQuery scrollTop？

所以，我试图使用jQuery动画制作一个带有WordPress主题的“滚动到顶部”按钮。我已经在这个几个小时没有运气。这里是JS的片段：在Wordpress中使用jQuery scrollTop？

< 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>

值得一提的是，jQuery和其他帆船被调用上述一段JS代码前几行。

<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>

请告诉我，我做错了什么。谢谢！

来源

2012-05-01 Tam N.

顺便说一句，这里的地方我从片段。我不得不修改一些东西来使其工作。可以肯定地说我的JS技能几乎没有。 http://webdesignerwall.com/tutorials/animated-scroll-to-top –

甜！我能够逆向工程从其他地方的一些其他片段。它现在有效。

<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>

谢谢你的帮助呢:)

来源

2012-05-01 08:04:34

使用event.preventDefault

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

来源

2012-05-01 07:29:32 Dhiraj

这并没有工作:( –

你遇到了什么错误？你检查了你的控制台吗？ – Dhiraj

是的，没有错误，这是问题所在。 –

在Wordpress中使用jQuery scrollTop？

回答

相关问题