Question

我的博客是www.xperiblog.com 我有一个滚动到顶部按钮，正常工作。但最近我删除了我的帖子导航脚本。现在按钮不起作用。这是代码

滚动到顶部按钮CSS

touches[1]

滚动到顶部按钮脚本

#back-to-top {
     text-align:center;
     background:#f97e76;
     color:#fff;
     overflow:hidden;
     width:60px;
     height:30px;
     display:block;
     margin:0 auto;
     border-radius:5px 5px 0 0;
     border-top:3px solid #d26b64;
     cursor:pointer;
     background-image:url(http://4.bp.blogspot.com/-YQ-kX3Ifzb4/U6a5HhEhlLI/AAAAAAAADxI/wT_VI6RLrHM/s1600/totop.png);
     background-repeat:no-repeat;
     background-position:center;
}
 #back-to-top a {
     color:#fff;
}
 #back-to-top a:hover {
     color:#f0f0f0;
}

我删除的脚本

<script>
$("#back-to-top").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
</script>

任何人都知道这里发生了什么。

Answer 1

我可以稍微清理一下这段代码，请看下面的内容：

HTML

<a href="#top" id="back-to-top" title="Back to top" class="show"><i class="fa fa-arrow-circle-o-up" style="font-size:22px;"></i></a>

css

#back-to-top {
font-size: 18px !important;
position: fixed;
z-index: 9999;
color: #e60000;
cursor: pointer;
bottom: 2em;
right: 2em;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}

#back-to-top.show {
opacity: 1;
}

JS

if (jQuery('#back-to-top').length) {
var scrollTrigger = 100, // px
    backToTop = function () {
        var scrollTop = jQuery(window).scrollTop();
        if (scrollTop > scrollTrigger) {
            jQuery('#back-to-top').addClass('show');
        } else {
            jQuery('#back-to-top').removeClass('show');
        }
    };
backToTop();
jQuery(window).on('scroll', function () {
    backToTop();
});
jQuery('#back-to-top').on('click', function (e) {
    e.preventDefault();
   jQuery('html,body').animate({
        scrollTop: 0
    }, 700);
});

滚动到我的网站顶部按钮不起作用

1 个答案: