滚动到顶部脚本不与溢出一起使用：滚动答案

【问题标题】：Scroll to top script not working in conjunction with overflow:scroll滚动到顶部脚本不与溢出一起使用：滚动
【发布时间】：2014-07-07 20:12:43
【问题描述】：

我写了这个滚动到顶部的脚本。一切都很好，但不是溢出：滚动，我已应用于我的包装器 div。我需要溢出的原因：滚动是因为我有溢出：html/body 标记的隐藏。这对于我的自定义滚动条发挥最佳功能是必要的。我知道这会干扰这个脚本，但为什么呢？

该脚本仅部分运行良好。向下滚动时会出现“滚动到顶部”，但点击后不会到顶部。

我做错了什么？

这是 Javascript：

<script>            
        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('#wrapper').animate({scrollTop: 0}, duration);
                return false;
            })
        });
    </script>

我的 CSS

<style>
        .back-to-top {
            position: fixed;
            bottom: 2em;
            right: 0px;
            text-decoration: none;
            color: #000000;
            background-color: rgba(235, 235, 235, 0.80);
            font-size: 12px;
            padding: 1em;
            display: none;
        }
    </style>

最后是 Html：

<a href="#" class="back-to-top">Back to Top</a>

【问题讨论】：

您的 javascript 控制台中是否出现任何错误？
似乎在这里工作：jsfiddle.net/L86yf/2（略有调整）
萤火虫没有错误，一切都很好。
你把return false;放在动画后面的理由是什么？
@rogMaHall 它修复了 ie7 中的一个问题

标签： javascript css

【解决方案1】：

你的问题在这里：

jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > offset) { }
});

您所做的是检查“window”对象是否已滚动以及当前顶部偏移量是否大于“offset”变量，然后您尝试在“#wrapper”内部滚动。

你应该做的是检查“#wrapper”是否被滚动以及它是否达到了偏移量。

编辑：如果你想滚动“window”对象，你应该像下面这样为“body”DOM元素设置动画；）

$('body').animate({scrollTop: 0}, duration);

【讨论】：