Question

我正在尝试创建一个回到顶部的按钮，例如此示例（http://www.meanthemes.com/plugins/meanmenu/，向下滚动，您将查看右侧的返回顶部按钮），我似乎无法获得它工作。

当用户向下滚动至少20％的页面时，任何人都可以帮我向我展示如何创建一个并且仅触发按钮的显示。

谢谢。

Answer 1

使用jquery scrollTop显示按钮。这可能对您有所帮助。

http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});

jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})
});

Answer 2

您可以使用以下jQuery代码

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

检查this tutorial了解更多信息

Answer 3

<script>
function gotoTop()
{
$('body,html').animate({scrollTop: 0}, 800);
}
</script>
<a href=javascript:void(0); onclick=gotoTop();>Top</a>

为网站创建一个回到顶部的按钮

3 个答案: