1

我在我的 Tumblr 博客中安装了一个无限滚动脚本，现在正在添加一个滚动到顶部按钮。一旦用户向下滚动超过某个点，我希望此按钮淡入，并在他们向上滚动时淡出。我还希望它提供平滑的滚动，而不仅仅是跳到顶部。

我精通 HTML 和 CSS，但不幸的是，我对 JavaScript 和 jQuery 基本上一无所知。我找到了这个 JS 方面的教程，它教我如何获得所需的滚动按钮。一切都很好，但唯一的问题是淡出不起作用 - 元素只是消失了。有时，如果我幸运的话，它会开始淡出一微秒左右，然后消失。

这是我正在使用的 JavaScript：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
    $("#gotop")
        .hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
});
</script>

我的 HTML 中有一个简单的锚元素，使用 ID #gotop 在 CSS 中设置样式：

<a href="#top" id="gotop">Top</a>

CSS：

#gotop {position: fixed;
    right: 2em; bottom: 2em;}

事实上，一切正常，除了淡出。

我已经在互联网上浏览过类似的此类问题。我尝试了我遇到的各种事情，但不幸的是，其中大部分对我来说都是希腊语。

编辑：我只是有一个想法。是否有可能没有发生淡出，因为在它有时间淡出之前，页面已经滚动回“隐藏”区域上方并且元素立即设置为隐藏？

如果有人知道任何事情，将不胜感激 - 感谢您的时间！

4

2 回答 2

0

好的，经过一番折腾，我设法找出了问题所在。

事实证明，通过使用 * 选择器，我已将页面上的所有元素设置为分配给它们的 CSS3 过渡：

* {margin: 0; padding: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

我这样做是为了方便，这样我的任何悬停都会有一个很好的过渡。但是，这似乎是导致我的滚动到顶部按钮功能失常的原因！

我建议任何与我遇到相同问题的人检查他们使用过的任何转换，并确保它们不会影响到顶部按钮。如果有任何疑问，请尝试暂时删除它们以进行检查。

希望这可以帮助。

于 2013-09-27T01:19:10.087 回答
0

希望这可以帮助

Js 小提琴演示

$(function () {
 $('#gotop').hide();
$(window).scroll(function () {

        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
     });
于 2013-09-26T04:09:17.650 回答