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

回答

相關問題