返回顶部按钮没有隐藏

back to top button doesn't hide

本文关键字：隐藏 按钮 顶部 返回      更新时间：2023-09-26

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

这是我的back to top 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;
}

你必须改变你的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>

当你滚动(top> 90)时，你需要用命令

显示它
$("#back-top").show();

编辑问题是:重要标签覆盖display:none标签。删除它(在css上)

display:none;
相关文章：