トップへのスクロール、html、bodyの100％の高さに隠されています

私はJqueryを使ってトップの矢印へのスクロールを実装しています。しかし、私の問題は、私が本文を設定すると、htmlは100％の高さになるそれは隠れる。次のようにトップへのスクロール、html、bodyの100％の高さに隠されています

Check this fiddle here

HTMLは

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％の高さを削除が、それは完璧に動作

<body> 

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

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

</body>

CSS、です。私は全く混乱している。 .goto-top、html、bodyのCSSとは何でしょうか？

注：私は体を維持したい、100％にhtmlの高さ（その必要 - MIN-高さではない）

出典

2016-06-23 Saurabh Sonawane

以下のコードを参照してください？私はしようとしている、あなたが話している問題は表示されません。 – master565

JSコードを表示します。 – makshh

@ master565 –

あなたはoverflow : hiddenを削除する必要があります。 body上ページでplunkerを作ることができます:)

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

body, html { 
 
    height : 100%; 
 
} 
 

 
main { 
 
    height:100%; 
 
    position: relative; 
 
    overflow-y: auto; 
 
    height:2000px 
 
} 
 
.goto-top { 
 
    display: inline-block; 
 
\t height: 40px; 
 
    width: 40px; 
 
    bottom: 20px; 
 
    right: 20px; 
 
    position: fixed; 
 
\t padding-top:11px; 
 
\t 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; 
 
\t background:#CCCCCC; 
 
\t visibility: hidden; 
 
\t 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 { 
 
\t background:#FFFFFF} 
 
.goto-top.goto-hide{ 
 
\t -webkit-transition:all 0.5s ease-in-out; 
 
\t   transition:all 0.5s ease-in-out; 
 
\t visibility:hidden;} \t 
 
@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>

出典

2016-06-24 07:19:37

こんにちは、私はそのオーバーフローを隠さずに作業を知っています。しかし私の場合は、オフキャンバスのナビゲーションメニューを使用しています。そこにはオーバーフロー：隠しプロパティを使用する必要があります。スニペットを共有していただきありがとうございますが、他に高さのプロパティで再生する方法がありますか？ –

トップへのスクロール、html、bodyの100％の高さに隠されています

答えて

関連する問題