时间戳

首页 > 解决方案 > 返回顶部按钮不会通过 js 显示

javascript - 返回顶部按钮不会通过 js 显示

问题描述

当我向下滚动时，滚动顶部链接不会出现，但是当我删除 CSS 中的显示属性时，它始终可见并且工作正常。您可以在页脚 CSS 下方看到滚动顶部链接的 CSS。所以请帮助我让我知道我在哪里做错了什么。我已经用 PHP 扩展名保存了索引文件

$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
html,body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
    background-color: #f0f0f0;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

#slides .carousel-inner img{
    height: 500px;
    width: 100%;
    }
#slides .carousel-caption{
    top: 50%;
}
#slides .carousel-caption h3{
    padding-bottom: 1rem;
}

footer{
    background-color: #3f3f3f;
    color: #d5d5d5;
    padding-top: 2rem;
}
footer a{
    color: #d5d5d5;
}
footer a:hover{
    color: #f6b31c;
    text-decoration: none;
}
#footicon{
    font-size: 1.6rem;
}
hr.light-100{
    border-top: 1px solid #d5d5d5;
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}
#scroll {
    position:fixed;
    right:20px;
    bottom:10px;
    color: #3498db;
    cursor:pointer;
    display: none;
    font-size: 2.5rem;
    z-index: 1000;
    }
#scroll:hover {
    color: #f6b31c;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donation-Center</title>

    <link href="styles/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/main.css">
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav><!-- Carousel -->
<section id="Carousel">
   <div id="slides" class="carousel carousel-fade" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#slides" data-slide-to="0" class="active"></li>
            <li data-target="#slides" data-slide-to="1"></li>
            <li data-target="#slides" data-slide-to="2"></li>
            <li data-target="#slides" data-slide-to="3"></li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
      <img class="d-block w-100" src="images/i1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/i1.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/i1.jpg" alt="Third slide">
    </div>
       </div>
       <a class="carousel-control-prev" style="background-image: none" href="#slides" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next"style="background-image: none" href="#slides" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</section>

<!-- Footer -->
<footer>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-md-4">
                <img src="logo" alt="logo">
                <hr class="light">
                <p><i class="fas fa-map-marker-alt mr-2"></i>5th Floor, Deans Plaza Peshawar</p>
                <p><i class="fas fa-envelope mr-2"></i>xxxxxxx@example.com</p>
                <p><i class="fas fa-envelope mr-2"></i>xxxxxx@example.com</p>
                <p><i class="fas fa-phone mr-2"></i>xxxxxxx</p>
                <div id="footicon">
                    <p>
                    <a href="http://www.facebook.com"><i class="fab fa-facebook"></i></a>
                    <a href="http://www.twitter.com"><i class="fab fa-twitter"></i></a>
                    <a href="http://www.gmail.com"><i class="fab fa-google-plus-g"></i></a>
                    <a href="http://www.instagram.com"><i class="fab fa-instagram"></i></a>
                    <a href="http://www.youtube.com"><i class="fab fa-youtube"></i></a>
                </p>
                </div>
            </div>
            <div class="col-md-4">
                <hr class="light">
                <h5>Our Hours</h5>
                <hr class="light">
                <p>Monday: 09am - 05pm</p>
                <p>Saturday: 10am - 04pm</p>
                <p>Sunday: Closed</p>
            </div>
            <div class="col-md-4">
                <hr class="light">
                <h5>Quick Links</h5>
                <hr class="light">
                <p><a href="index.php"><i class="fas fa-home mr-2"></i>Home</a></p>
                <p><a href="gallery.php"><i class="fas fa-images mr-2"></i>Gallery</a></p>
                <p><a href="contact.php"><i class="fas fa-question-circle mr-2"></i>Contact</a></p>
            </div>
            <div class="col-12">
                <hr class="light-100">
                <h5>&copy; DonateForLife.com 2018</h5>
            </div>
        </div>
    </div>
</footer>
<a href="#" id="scroll"><i class="fas fa-chevron-circle-up"></i></a>  

<script src="js/jquery-3.3.1.min.js"> </script>
<script src="js/scroll-top.js"></script>
<script src="js/fontawesome-all.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>
</html>

标签： javascriptscroll

解决方案

您的代码有效，我认为问题是多个 jquery 调用。如果我只包含一次 jquery 就可以工作。只需删除以下...

<script src="js/jquery-3.3.1.min.js"> </script>

推荐阅读