Question

您好我正在谷歌驱动器上托管此网站

https://2f7ee6e1d298437397e66610bc131ba9fc982562.googledrive.com/host/0B_bqKoIkDjvKWXNQSFkyYXZhajg/SHAILLABS/index.html#page-top

问题是，当页面打开时，滚动到顶部按钮是可见的

我正在使用这个js-roll.js（https://drive.google.com/folderview?id=0B_bqKoIkDjvKalFISUczM3Y5RjQ&usp=sharing）

 $(window).scroll(function() {
    if ($(this).scrollTop()>100)
     {
        $('.scroll-top').fadeIn();
     }
    else
     {
      $('.scroll-top').fadeOut();
     }
 });

但页面源（第7行最后一行）显示脚本为

<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8><meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"><title>Error 404 (Not Found)!!1</title>
<style>*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* >body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/errors/logo_sm_2.png) no-repeat}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/errors/logo_sm_2_hr.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/errors/logo_sm_2_hr.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/errors/logo_sm_2_hr.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:55px;width:150px}
</style>
<div id="af-error-container"><a href=//www.google.com/><span id=logo aria-label=Google>
</span></a><p>404 <ins>That’s an error.</ins><p>The requested URL was not found on this server. <ins>That’s all we know.</ins></div>

如何隐藏向上滚动按钮？

Answer 1

添加一些最初将使用的CSS：

.scroll-top {
     display:none;
}

然后当窗口滚动时，它将淡入视图。

Answer 2

将display:none添加到按钮div，如下所示：

<div class="scroll-top page-scroll" style="display: none;">

或者你可以这样做：

.scroll-top.page-scroll {
    diplay:none;
}

Answer 3

$('.scroll-top').hide();

$(window).scroll(function() {
    if ($(this).scrollTop()>100)
     {
        $('.scroll-top').fadeIn();
     }
    else
     {
      $('.scroll-top').fadeOut();
     }
 });

页面打开时隐藏滚动按钮

3 个答案: