为什么我的返回顶部按钮在整行中都是可点击的？

Question

我正在尝试在页脚中添加一个返回顶部按钮。它是可点击的，它会将您带回到页面顶部，但问题是它在我的网格的整行中都是可点击的，我只是不知道为什么会这样。我已经尝试了一些方法，但无法想出正确的解决方案。https://jsfiddle.net/HcJanni/arcoxs7z/124/// header Effekt beim scrollen$(function() {  var shrinkHeader = 100;  $(window).scroll(function() {    var scroll = getCurrentScroll();    if (scroll >= shrinkHeader) {      $('#navbar').addClass('shrink');    } else {      $('#navbar').removeClass('shrink');    }  });  function getCurrentScroll() {    return window.pageYOffset || document.documentElement.scrollTop;  }});// JavaScript Document$(document).ready(function() {  var navTop = $('#navbar').offset().top;  var navHeight = $('#navbar').height();  var windowH = $(window).height();  $('.section').height(windowH);  $(document).scroll(function() {    var st = $(this).scrollTop();    //for the nav bar:    if (st > navTop) {      $('#navbar').addClass('fix');      $('.section:eq(0)').css({        'margin-top': navHeight      }); //fix  scrolling issue due to the fix nav bar    } else {      $('#navbar').removeClass('fix');      $('.section:eq(0)').css({        'margin-top': '0'      });    }    $('.section').each(function(index, element) {      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {        $(this).addClass('active');        var id = $(this).attr('id');        $('a[href="#' + id + '"]').parent('li').addClass('active');        // or $('#nav li:eq('+index+')').addClass('active');      } else {        $(this).removeClass('active');        var id = $(this).attr('id');        $('a[href="#' + id + '"]').parent('li').removeClass('active');        //or $('#nav li:eq('+index+')').removeClass('active');      }    });  });});

Answer 1

您的边距使图像充满容器

#backtotop {

    margin-left: auto;

    margin-right: auto;

    margin-top: 1rem;

    display: block;

通过将 ID 移动到链接来将边距放在链接上

<a href="#home" id="backtotop">

  <img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75">

</a>

并在容器上使用文本对齐居中

#socialmedia {

  /* background-color: lightgreen; */

  text-align:center;

}

#backtotop {

  margin-top: 1rem;

  display: block;

}

// header Effekt beim scrollen

$(function() {

  var shrinkHeader = 100;

  $(window).scroll(function() {

    var scroll = getCurrentScroll();

    if (scroll >= shrinkHeader) {

      $('#navbar').addClass('shrink');

    } else {

      $('#navbar').removeClass('shrink');

    }

  });

  function getCurrentScroll() {

    return window.pageYOffset || document.documentElement.scrollTop;

  }

});

// JavaScript Document

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;

  var navHeight = $('#navbar').height();

  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {

    var st = $(this).scrollTop();

    //for the nav bar:

    if (st > navTop) {

      $('#navbar').addClass('fix');

      $('.section:eq(0)').css({

        'margin-top': navHeight

      }); //fix  scrolling issue due to the fix nav bar

    } else {

      $('#navbar').removeClass('fix');

      $('.section:eq(0)').css({

        'margin-top': '0'

      });

    }

    $('.section').each(function(index, element) {

      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {

        $(this).addClass('active');

        var id = $(this).attr('id');

        $('a[href="#' + id + '"]').parent('li').addClass('active');

        // or $('#nav li:eq('+index+')').addClass('active');

      } else {

        $(this).removeClass('active');

        var id = $(this).attr('id');

        $('a[href="#' + id + '"]').parent('li').removeClass('active');

        //or $('#nav li:eq('+index+')').removeClass('active');

      }

    });

  });

});

  $(window).on("load", function() {

    $(".loader-wrapper").fadeOut("slow");

  });

</script>

<!-- Animation Ende -->

<!-- Smooth Scroll -->

<script>

  $('a').click(function() {

    $('html, body').animate({

      scrollTop: $($(this).attr('href')).offset().top

    }, 500);

    return false;

  });

@charset "utf-8";

/* CSS Document */

* {

  font-family: 'Roboto', sans-serif;

}

#container {

  width: 1280px;

  height: 100%;

  margin-left: auto;

  margin-right: auto;

}

body {

  background-color: white;

  margin: 128px 0 0 0;

}

/* Navigation */

#navlinks {

  margin: 0;

}

ul {

  color: black;

  list-style: none;

  float: right;

  margin-right: 20px;

  padding-top: 30px;

}

ul li {

  display: inline-table;

  margin-left: 5px;

  padding: 5px;

  border-bottom: 1.5px solid;

  border-bottom-color: white;

}

ul li a {

  color: black;

  text-decoration: none;

  padding: 10px;

}

/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */

#navbar.fix {

  position: fixed;

  top: 0;

}

#navbar li.active {

  border-bottom: 1.5px solid;

  border-bottom-color: #f6bd60;

}

/* Smart Navbar Ende */

/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */

#navbar {

  border-bottom-style: solid;

  border-bottom-width: 1.25px;

  box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);

  background-color: white;

  height: 128px;

  transition: 0.32s;

  position: fixed;

  top: 0;

  width: 1280px;

}

#navbar.shrink {

  height: 80px;

  line-height: 18px;

}

#navbar li {

  font-size: 1.2rem;

  font-weight: normal;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar.shrink li {

  font-size: 1.2rem;

  margin-top: -30px;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar img {

  height: 128px;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

}

#navbar.shrink img {

  height: 80px;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

  margin: auto;

}

/* fixed nav Ende */

/*

#spacer {

  height: 128px;

  border-bottom: 4px solid;

}

  margin-top: 0 !important;

*/

#home {

  height: 100% !important;

  display: block;

  padding-top: 80px;

  z-index: -1;

  position: relative;

  top: -80px;

}

#wir-ueber-uns {

  height: 50px;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -2;

  background-color: lightblue;

  position: relative;

  top: -80px;

}

#aktionen {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -3;

  background-color: blue;

  position: relative;

  top: -80px;

}

#terminvereinbarung {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -4;

  background-color: red;

  position: relative;

  top: -80px;

}

#infos {

  height: 100%;

  display: block;

  margin-top: -80px;

  padding-top: 80px;

  z-index: -5;

  background-color: yellow;

  position: relative;

  top: -80px;

}

#logo {

  margin-left: 50px;

}

#homebild {

  width: 100%;

  height: 100%;

}

footer {

  background-color: lightblue;

  display: grid;

  grid-template-columns: 426px 426px 450px;

  grid-template-rows: 500px;

  gap: 0px 0px;

  grid-template-areas: ". .";

}

#impressum {

  line-height: 1.5rem;

  font-size: 1rem;

  padding-left: 30px;

  padding-top: 4rem;

  height: 500px;

}

h3 {

  font-size: 1.2rem;

}

h4 {

  font-size: 1.2rem;

  text-transform: uppercase;

}

#datenschutz {

  line-height: 1.5rem;

  font-size: 1rem;

  padding-left: 30px;

  padding-top: 4rem;

}

#socialmedia {

  /* background-color: lightgreen; */

  text-align:center;

}

#backtotop {

  margin-top: 1rem;

  display: block;

}

/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */

.hvr-sweep-to-top {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);

  transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  position: relative;

  -webkit-transition-property: color;

  transition-property: color;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.hvr-sweep-to-top:before {

  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #f6bd60;

  -webkit-transform: scaleY(0);

  transform: scaleY(0);

  -webkit-transform-origin: 50% 100%;

  transform-origin: 50% 100%;

  -webkit-transition-property: transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-timing-function: ease-out;

  transition-timing-function: ease-out;

}

.hvr-sweep-to-top:hover,

.hvr-sweep-to-top:focus,

.hvr-sweep-to-top:active {

  color: white;

}

.hvr-sweep-to-top:hover:before,

.hvr-sweep-to-top:focus:before,

.hvr-sweep-to-top:active:before {

  -webkit-transform: scaleY(1);

  transform: scaleY(1);

}

/* Hover Effekt Ende */

/* Loader */

.loader {

  display: inline-block;

  width: 30px;

  height: 30px;

  position: relative;

  border: 4px solid #Fff;

  animation: loader 2s infinite ease;

}

.loader-inner {

  vertical-align: top;

  display: inline-block;

  width: 100%;

  background-color: #fff;

  animation: loader-inner 2s infinite ease-in;

}

@keyframes loader {

  0% {

    transform: rotate(0deg);

  }

  25% {

    transform: rotate(180deg);

  }

  50% {

    transform: rotate(180deg);

  }

  75% {

    transform: rotate(360deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes loader-inner {

  0% {

    height: 0%;

  }

  25% {

    height: 0%;

  }

  50% {

    height: 100%;

  }

  75% {

    height: 100%;

  }

  100% {

    height: 0%;

  }

}

.loader-wrapper {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: #242f3f;

  display: flex;

  align-items: center;

  justify-content: center;

}

/* loader Ende */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div id="container">

  <div class="body">

    <!-- Navigation -->

    <nav id="navbar">

      <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

      <script src="javascript/navbar fixed.js"></script>

      <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png"></a>

      <ul>

        <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>

        <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>

        <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>

        <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>

        <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>

      </ul>

    </nav>

    <!-- body -->

    <div id="spacer"></div>

    <!-- home section -->

    <section id="home" class="section">

      <div>

        <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild">

      </div>

    </section>

    <!-- UberUns section -->

    <section id="wir-ueber-uns" class="section">

      <div>

        <p>section 2</p>

      </div>

    </section>

    <!-- Aktionen section -->

    <div id="reference"></div>

    <section id="aktionen" class="section">

      <div>

        <p>section 3</p>

      </div>

    </section>

    <!-- Terminvereinbarung section -->

    <section id="terminvereinbarung" class="section">

      <div>

        <p>section 4</p>

      </div>

    </section>

    <!-- Infos section -->

    <section id="infos" class="section">

      <div>

        <p>section 5</p>

      </div>

    </section>

    <footer>

      <div id="impressum">

        <h3>Impressum</h3>

        <h4>

          Optik Tack GmbH

        </h4>

        <p>

          <!-- Icons von https://tablericons.com/ -->

          <!-- map Icon -->

          <img src="https://i.postimg.cc/02y75n0W/map-pin.png" alt="mapicon" width="16" height="16"> Mozartstraße 37 <br> 73430 Aalen <br>

          <!-- phone Icon -->

          <img src="https://i.postimg.cc/wjPXGNJW/phone.png" alt="phoneicon" width="16" height="16"> Tel.: [phone] <br>

          <!-- at Icon -->

          <img src="https://i.postimg.cc/tJ5dSmtP/at.png" alt="aticon" width="16" height="16"> [e-mail] <br>

          <!-- bookmark Icon -->

          <img src="https://i.postimg.cc/T29PwXkG/bookmarks.png" alt="bookmarkicon" width="16" height="16"> www.optik-tack.de

        </p>

        <p>

          Geschäftsführer: Anton Tack <br> Amtsgericht Aalen <br> Handelsregister Nr. XXX000XXX, <br> Finanzamt Aalen <br> USt.IdNr.: DE10111011 <br>

        </p>

      </div>

      <div id="socialmedia">

        <!-- back to top Icon -->

        <a href="#home" id="backtotop">

          <img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75">

        </a>

      </div>

      <div id="datenschutz">

        <h3>Datenschutz</h3>

        <h4>Datenschutzhinweise</h4>

        <p>gemäß EU-Datenschutz-Grundverordnung (DSGVO)</p>

      </div>

    </footer>

  </div>

</div>

<!-- Animation am Anfang vom Laden der Seite -->

<div class="loader-wrapper">

  <span class="loader"><span class="loader-inner"></span></span>

</div>

<!-- Smooth Scroll Ende -->