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

时间:2014-01-21 05:08:50

标签: jquery html html5 css3

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

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

谢谢。

3 个答案:

答案 0 :(得分: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;
})
});

答案 1 :(得分:1)

您可以使用以下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了解更多信息

答案 2 :(得分:0)

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