我已经使用 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 应该是什么？
注意: 我想将 body,html 高度保持为 100%(这是必需的 - 不是最小高度)
最佳答案
您需要删除溢出:隐藏；在 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>关于javascript - 滚动到顶部的箭头隐藏在 html 上，正文 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37998958/