Question

我一直在努力了解如何将本教程转换为Wordpress。我可能在Javascript上做错了 - 把它放在错误的地方等等。而且我不确定Wordpress是否已经包含了jQuery脚本..

如果有人能帮助我，我将不胜感激：）

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-implement-a-sticky-back-to-top-button/?search_index=1

这是我在index.php中贴在body标签末端的按钮：

<a href="#" class="go-top">Go Top</a>

这是我正在下面的Javascript：

<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // Show or hide the sticky footer button
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $('.go-top').fadeIn(200);
            } else {
                $('.go-top').fadeOut(200);
            }
        });

        // Animate the scroll to top
        $('.go-top').click(function(event) {
            event.preventDefault();

            $('html, body').animate({scrollTop: 0}, 300);
        })
    });
</script>

Answer 1

按照以下步骤

将以下代码添加到functions.php（进入主题文件夹）

 add_action( 'wp_head', 'load_into_head' ); 
 function load_into_head() { 
  wp_enqueue_script( 'jquery' ); //to load jQuery
 }

将以下代码添加到functions.php（上述步骤中的相同文件）

    add_action('wp_footer', 'add_this_script_footer');
    function add_this_script_footer(){
        ?>
        <style type="text/css"> 
        .go-top {
                position: fixed;
                bottom: 2em;
                right: 2em;
                text-decoration: none;
                color: white;
                background-color: rgba(0, 0, 0, 0.3);
                font-size: 12px;
                padding: 1em;
                display: none;
                                        z-index: 999999;
            }

            .go-top:hover {
                background-color: rgba(0, 0, 0, 0.6);
            }
        </style>
        <script type="text/javascript">
                    jQuery(document).ready(function() {
                        jQuery('body').append('<a href="#" class="go-top">Go Top</a>')
                        // Show or hide the sticky footer button
                        jQuery(window).scroll(function() {
                            console.log(jQuery(this).scrollTop());
                            if (jQuery(this).scrollTop() > 200) {
                                jQuery('.go-top').fadeIn(200);
                            } else {
                                jQuery('.go-top').fadeOut(200);
                            }
                        });

                        // Animate the scroll to top
                        jQuery('.go-top').click(function(event) {
                            event.preventDefault();

                            jQuery('html, body').animate({scrollTop: 0}, 300);
                        })
                    });
        </script>
        <?php
    }

如果发生任何错误，请告诉我

如何在Wordpress中实现粘性返回顶部？

1 个答案: