滾動到頂部箭頭隱藏在html上，正文高度為100％

Question

我已經使用Jquery實現了一個滾動到頂部箭頭的功能，它工作正常。 但是我的問題是當我將body設置為html到100％的高度時，它會自行隱藏。

HTML如下

<body>

    <main id="top">
        ........
        main content goes here
        ....
    </main>

    <!-- goto top arrow -->
    <a href="#top" class="goto-top">Top</a>

</body>

的CSS

body, html {
    overflow-x: hidden;
    height: 100%; /* when I remove this, it works */
}

main {
    height:100%;
    position: relative;
    overflow-y: auto;
}
.goto-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    bottom: 20px;
    right: 20px;
    position: fixed;
    border-radius:50%;
    overflow: hidden;
    white-space: nowrap;
    opacity:0;
    z-index:999;
    background:#CCCCCC;
    visibility: hidden;
    color:#111111;
}

當我從html，body元素中刪除100％的高度時，它可以完美工作。 我很困惑。 .goto-top，html和body的CSS應該是什么？

注意：我想保持身體，html高度為100％（這是必需的-不是最小高度）

Answer 1

您需要消除overflow : hidden ； 在body看到下面的代碼:)

 var offset = 300, /* visible when reach */ offset_opacity = 1200, /* opacity reduced when reach */ scroll_top_duration = 700, $back_to_top = $('.goto-top'); //hide or show the "back to top" link $(window).scroll(function(){ ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('goto-is-visible') : $back_to_top.removeClass('goto-is-visible goto-fade-out'); if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('goto-fade-out'); } }); //smooth scroll to top $back_to_top.on('click', function(event){ event.preventDefault(); $('body,html').animate({ scrollTop: 0 , }, scroll_top_duration ); });

 body, html { height : 100%; } main { height:100%; position: relative; overflow-y: auto; height:2000px } .goto-top { display: inline-block; height: 40px; width: 40px; bottom: 20px; right: 20px; position: fixed; padding-top:11px; text-align:center; border-radius:50%; overflow: hidden; white-space: nowrap; opacity:0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; z-index:999; background:#CCCCCC; visibility: hidden; color:#111111;} .goto-top.goto-is-visible, .goto-top.goto-fade-out, .no-touch .goto-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;} .goto-top.goto-is-visible { visibility: visible; opacity: 1;} .goto-top.goto-fade-out { opacity: .8;} .no-touch .goto-top:hover,.goto-top:hover { background:#FFFFFF} .goto-top.goto-hide{ -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; visibility:hidden;} @media only screen and (min-width: 768px) { .goto-top { right: 40px; bottom: 40px;} }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <main id="top">scroll below</main> <!-- goto top arrow --> <a href="#top" class="goto-top">Top</a>

滾動到頂部箭頭隱藏在html上，正文高度為100％

問題描述

1 個解決方案

解決方案1
0 2016-06-24 07:19:37

滾動到頂部箭頭隱藏在html上，正文高度為100％

問題描述

1 個解決方案

解決方案1 0 2016-06-24 07:19:37

解決方案1
0 2016-06-24 07:19:37