Scroll to top arrow is hidden on html, body 100% height

Question

I have implemented a scroll to top arrow using Jquery, and its working perfectly. But my problem is when I set body, html to 100% height it hides itself.

Check this fiddle here

Html is as follows,

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

When I remove 100% height from html,body element, It works perfectly. I am totally confused. What should be the CSS for .goto-top, html and body?

Note: I wanted to keep body,html height to 100% (Its required - not min-height)

Answer 1

You need to remove overflow : hidden ; on the body see the code below :)

 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>

Scroll to top arrow is hidden on html, body 100% height

Question

1 answers

solution1
0 2016-06-24 07:19:37

Scroll to top arrow is hidden on html, body 100% height

Question

1 answers

solution1 0 2016-06-24 07:19:37

solution1
0 2016-06-24 07:19:37