Scroll nach oben Pfeil ist auf HTML versteckt, Körper 100% Höhe

Ich habe eine Rolle nach oben Pfeil mit Jquery implementiert, und es funktioniert perfekt. Aber mein Problem ist, wenn ich Körper, html auf 100% Höhe verbirgt es verbirgt sich.Scroll nach oben Pfeil ist auf HTML versteckt, Körper 100% Höhe

Check this fiddle here

Html ist wie folgt,

<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; 
}

Wenn ich von html, body-Element 100% Höhe entfernen, es funktioniert perfekt. Ich bin total verwirrt. Was sollte das CSS für .goto-top, html und body sein?

Hinweis: Ich wollte Körper halten, html Höhe auf 100% (Seine erforderlich - nicht min-height)

Quelle

2016-06-23 Saurabh Sonawane

Können Sie eine Plunker mit der Seite machen? Ich habe versucht, und ich sehe das Problem nicht, von dem du sprichst. – master565

Zeigen Sie Ihren JS-Code. – makshh

@ master565 überprüfen Sie die Geige –

Sie müssen overflow : hidden entfernen; siehe die body den Code unten :)

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>

Quelle

2016-06-24 07:19:37

Hallo, ich weiß es funktioniert ohne Überlauf versteckt. Aber in meinem Fall habe ich das OFF-Canvas Navigationsmenü benutzt, da muss ich overflow: hidden property verwenden. Vielen Dank für die Freigabe des Snippets, aber haben Sie eine andere Alternative zum Spielen mit height property? –

Scroll nach oben Pfeil ist auf HTML versteckt, Körper 100% Höhe

Antwort

Verwandte Themen