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上看到下面的代码：）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

滚动到顶部箭头隐藏在html，身体100％高度

1 个答案: