时间戳

首页 > 解决方案 > 向下滚动按钮不会出现两次，html

html - 向下滚动按钮不会出现两次，html

问题描述

我正在根据此处找到的一些问题创建一个网站，并且我想在下方添加一个向下滚动按钮。在这里，我尝试实现自己的代码，并且它有效。

代码 ：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}


.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}


/* Avoiding overlay */

.main {
  margin-top: 55px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}


/* The progress container */

.progress-container {
  margin-top: 6px;
  width: 100%;
  height: 8px;
  background: #ccc;
}


/* The progress bar */

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
  background-attachment: fixed;
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.dI7owNNNwtRKg0Ho4kZNIAHaEK?pid=ImgDet&rs=1");
  background-attachment: fixed;
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
  background-attachment: fixed;
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}


.demo a {
  position: absolute;
  bottom: 0;
  left: 45%;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;

  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}

#section04 a {
  padding-top: 60px;
}
#section04 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

p {
  padding: 50px;
  background-color: #2A2A2A;
  color: white;
  font-size: 17px;
}


</style>
</head>
<body>

  <div class="navbar">
    <a href="app.html">Home</a>
    <a href="#news">Gallery</a>
    <a href="#contact">About</a>
  </div>



  <div class="header">
    <div class="progress-container">
      <div class="progress-bar" id="Bar"></div>
    </div>
  </div>


  <div class='main'></div>
    <div class="bg-image"></div>

    <div class="bg-text">
      <h2>Blurred Background</h2>
      <h1>My car website</h1>
    </div>
    
    <div id='p1'>
      <p>Car website!</p>
    </div>
      
    <center>
      <section id="section04" class="demo">
        <a href="#p1"><span></span>Scroll</a>
      </section>
    </center>     

    <div class="bg-image1"></div>
    <div class="bg-text1">
      <h2>Blurred Background</h2>
      <h1>My car website</h1>
    </div>

    <center>
      <section id="section04" class="demo">
        <a href="#p1"><span></span>Scroll</a>
      </section>
    </center>    

    <div class="bg-image2"></div>
    <div class="bg-text2">
      <h2>Blurred Background</h2>
      <h1>My car website</h1>
    </div>

<script>
  window.onscroll = function() {changeOnScroll()};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

</script>

</body>
</html>

因此，当您运行程序时，您会看到一个“向下滚动”按钮。当您单击它时，您将平滑滚动到下一个 div。但是，如果您看到该程序，我也尝试将向下滚动按钮添加到下一个 div，但它没有出现。为什么会这样？有什么解决办法吗？

标签： htmlcss

解决方案

<style>
    .natis {

        width: 25%;
        height: 150px;
        border: 2px solid black;

        overflow: hidden;
        background-color: blue;
        color: white;
        overflow: scroll;
        text-align: center;


    }
</style>



<div class="natis">
    <h1>This is example </h1>
    <p> i am accusam dolore consetetur dolor amet duo lorem amet duo et, et lorem sed magna aliquyam, consetetur sit
        no vero dolore lorem, consetetur stet et sanctus diam takimata dolor stet, dolor sadipscing consetetur
        tempor sanctus elitr sit et accusam. Sadipscing lorem ut sadipscing erat, diam sanctus dolor sed ipsum magna
        consetetur labore stet takimata, eirmod consetetur dolore dolore dolor et consetetur, ipsum elitr justo
        consetetur dolores amet, elitr amet duo diam amet et justo justo est. Sit stet nonumy vero no et accusam sit
        justo vero, et elitr kasd diam lorem dolor erat lorem. Sed ipsum sed rebum stet sed. nonumy diam no dolore
        et gubergren. Ipsum gubergren vero labore diam, invidunt takimata sed sadipscing erat elitr magna clita
        sadipscing takimata. Nonumy nonumy dolor diam sit justo et erat, sanctus sed erat amet diam no consetetur
        kasd eos. Amet gubergren et aliquyam consetetur. Et no sed dolores labore. </p>
</div>

推荐阅读