回到顶部按钮不隐藏

Question

我是jquery的新手。我正在为我的网站制作一个回到顶部箭头，我有一个关于隐藏回到顶部按钮的问题。它始终显示，永不隐藏。我想要的只是首先隐藏按钮，然后可能会再次显示90px的高度。请帮我解决一下这个。

这是我标题顶部的jquery脚本：

<script>
$(document).ready(function(){

    // hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 90) {
    $('#back-top').fadeIn();
    } else {
    $('#back-top').fadeOut();
    }
    });

    // scroll body to 0px on click
    $('#back-top a').click(function () {
    $('body,html').animate({
    scrollTop: 0}, 800);
    return false;
    });
    });

});
</script>

这是我回到顶部的HTML：

<a id="back-top" href="#top">
    <i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>

我的css：

#back-top {
display: block !important;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163,15,15,0.4);
border-radius: 8px !important;
}
#back-topi {
  display: block !important;
  font-size: 40px;
}

Answer 1

当您滚动（顶部＆gt; 90）时，您需要使用命令

显示它

$("#back-top").show();

修改 事情是！important标签覆盖display：none标签。 只需删除它（在css上）

display:none;

Answer 2

您必须将 CSS 以及 jQuery 更改为：

代码段

$(document).ready(function(e) {

  // browser window scroll (in pixels) after which the "back to top" link is shown
  var offset = 300,
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('#back-top');

  //hide or show the "back to top" link
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'):
      $back_to_top.removeClass('is-visible is-fade-out');
    if ($(this).scrollTop() > offset_opacity) {
      $back_to_top.addClass('is-fade-out');
    }
  });

  //smooth scroll to top
  $back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration);
  });

});

body {
  height: 1000px;
  margin: 0;
  padding: 0;
}
#back-top {
  display: inline-block;
  background: none;
  margin: 0;
  position: fixed;
  bottom: 50px;
  right: 45%;
  width: 40px;
  height: 40px;
  z-index: 100;
  text-decoration: none;
  color: #ffffff;
  background-color: rgba(163, 15, 15, 0.4);
  border-radius: 8px;
  visibility: hidden;
  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;
}
#back-topi {
  font-size: 40px;
}
#back-top.is-visible,
#back-top.is-fade-out,
#back-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;
}
#back-top.is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
#back-top:hover {
  background-color: #0180ca;
  opacity: 1;
}
#back-top:hover,
#back-top:active,
#back-top:focus {
  outline: none;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="back-top" href="#top">
  <i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>