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

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 {&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; margin-top: 1rem;&nbsp; &nbsp; display: block;通过将 ID 移动到链接来将边距放在链接上<a href="#home" id="backtotop">&nbsp; <img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75"></a>并在容器上使用文本对齐居中#socialmedia {&nbsp; /* background-color: lightgreen; */&nbsp; text-align:center;}#backtotop {&nbsp; margin-top: 1rem;&nbsp; display: block;}// header Effekt beim scrollen$(function() {&nbsp; var shrinkHeader = 100;&nbsp; $(window).scroll(function() {&nbsp; &nbsp; var scroll = getCurrentScroll();&nbsp; &nbsp; if (scroll >= shrinkHeader) {&nbsp; &nbsp; &nbsp; $('#navbar').addClass('shrink');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('#navbar').removeClass('shrink');&nbsp; &nbsp; }&nbsp; });&nbsp; function getCurrentScroll() {&nbsp; &nbsp; return window.pageYOffset || document.documentElement.scrollTop;&nbsp; }});// JavaScript Document$(document).ready(function() {&nbsp; var navTop = $('#navbar').offset().top;&nbsp; var navHeight = $('#navbar').height();&nbsp; var windowH = $(window).height();&nbsp; $('.section').height(windowH);&nbsp; $(document).scroll(function() {&nbsp; &nbsp; var st = $(this).scrollTop();&nbsp; &nbsp; //for the nav bar:&nbsp; &nbsp; if (st > navTop) {&nbsp; &nbsp; &nbsp; $('#navbar').addClass('fix');&nbsp; &nbsp; &nbsp; $('.section:eq(0)').css({&nbsp; &nbsp; &nbsp; &nbsp; 'margin-top': navHeight&nbsp; &nbsp; &nbsp; }); //fix&nbsp; scrolling issue due to the fix nav bar&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('#navbar').removeClass('fix');&nbsp; &nbsp; &nbsp; $('.section:eq(0)').css({&nbsp; &nbsp; &nbsp; &nbsp; 'margin-top': '0'&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; $('.section').each(function(index, element) {&nbsp; &nbsp; &nbsp; if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('active');&nbsp; &nbsp; &nbsp; &nbsp; var id = $(this).attr('id');&nbsp; &nbsp; &nbsp; &nbsp; $('a[href="#' + id + '"]').parent('li').addClass('active');&nbsp; &nbsp; &nbsp; &nbsp; // or $('#nav li:eq('+index+')').addClass('active');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('active');&nbsp; &nbsp; &nbsp; &nbsp; var id = $(this).attr('id');&nbsp; &nbsp; &nbsp; &nbsp; $('a[href="#' + id + '"]').parent('li').removeClass('active');&nbsp; &nbsp; &nbsp; &nbsp; //or $('#nav li:eq('+index+')').removeClass('active');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});&nbsp; $(window).on("load", function() {&nbsp; &nbsp; $(".loader-wrapper").fadeOut("slow");&nbsp; });</script><!-- Animation Ende --><!-- Smooth Scroll --><script>&nbsp; $('a').click(function() {&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: $($(this).attr('href')).offset().top&nbsp; &nbsp; }, 500);&nbsp; &nbsp; return false;&nbsp; });@charset "utf-8";/* CSS Document */* {&nbsp; font-family: 'Roboto', sans-serif;}#container {&nbsp; width: 1280px;&nbsp; height: 100%;&nbsp; margin-left: auto;&nbsp; margin-right: auto;}body {&nbsp; background-color: white;&nbsp; margin: 128px 0 0 0;}/* Navigation */#navlinks {&nbsp; margin: 0;}ul {&nbsp; color: black;&nbsp; list-style: none;&nbsp; float: right;&nbsp; margin-right: 20px;&nbsp; padding-top: 30px;}ul li {&nbsp; display: inline-table;&nbsp; margin-left: 5px;&nbsp; padding: 5px;&nbsp; border-bottom: 1.5px solid;&nbsp; border-bottom-color: white;}ul li a {&nbsp; color: black;&nbsp; text-decoration: none;&nbsp; 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 {&nbsp; position: fixed;&nbsp; top: 0;}#navbar li.active {&nbsp; border-bottom: 1.5px solid;&nbsp; border-bottom-color: #f6bd60;}/* Smart Navbar Ende *//* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */#navbar {&nbsp; border-bottom-style: solid;&nbsp; border-bottom-width: 1.25px;&nbsp; box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);&nbsp; background-color: white;&nbsp; height: 128px;&nbsp; transition: 0.32s;&nbsp; position: fixed;&nbsp; top: 0;&nbsp; width: 1280px;}#navbar.shrink {&nbsp; height: 80px;&nbsp; line-height: 18px;}#navbar li {&nbsp; font-size: 1.2rem;&nbsp; font-weight: normal;&nbsp; -webkit-transition: all 0.3s;&nbsp; -moz-transition: all 0.3s;&nbsp; transition: all 0.3s;}#navbar.shrink li {&nbsp; font-size: 1.2rem;&nbsp; margin-top: -30px;&nbsp; -webkit-transition: all 0.3s;&nbsp; -moz-transition: all 0.3s;&nbsp; transition: all 0.3s;}#navbar img {&nbsp; height: 128px;&nbsp; -webkit-transition: all 0.3s;&nbsp; -moz-transition: all 0.3s;&nbsp; transition: all 0.3s;}#navbar.shrink img {&nbsp; height: 80px;&nbsp; -webkit-transition: all 0.3s;&nbsp; -moz-transition: all 0.3s;&nbsp; transition: all 0.3s;&nbsp; margin: auto;}/* fixed nav Ende *//*#spacer {&nbsp; height: 128px;&nbsp; border-bottom: 4px solid;}&nbsp; margin-top: 0 !important;*/#home {&nbsp; height: 100% !important;&nbsp; display: block;&nbsp; padding-top: 80px;&nbsp; z-index: -1;&nbsp; position: relative;&nbsp; top: -80px;}#wir-ueber-uns {&nbsp; height: 50px;&nbsp; display: block;&nbsp; margin-top: -80px;&nbsp; padding-top: 80px;&nbsp; z-index: -2;&nbsp; background-color: lightblue;&nbsp; position: relative;&nbsp; top: -80px;}#aktionen {&nbsp; height: 100%;&nbsp; display: block;&nbsp; margin-top: -80px;&nbsp; padding-top: 80px;&nbsp; z-index: -3;&nbsp; background-color: blue;&nbsp; position: relative;&nbsp; top: -80px;}#terminvereinbarung {&nbsp; height: 100%;&nbsp; display: block;&nbsp; margin-top: -80px;&nbsp; padding-top: 80px;&nbsp; z-index: -4;&nbsp; background-color: red;&nbsp; position: relative;&nbsp; top: -80px;}#infos {&nbsp; height: 100%;&nbsp; display: block;&nbsp; margin-top: -80px;&nbsp; padding-top: 80px;&nbsp; z-index: -5;&nbsp; background-color: yellow;&nbsp; position: relative;&nbsp; top: -80px;}#logo {&nbsp; margin-left: 50px;}#homebild {&nbsp; width: 100%;&nbsp; height: 100%;}footer {&nbsp; background-color: lightblue;&nbsp; display: grid;&nbsp; grid-template-columns: 426px 426px 450px;&nbsp; grid-template-rows: 500px;&nbsp; gap: 0px 0px;&nbsp; grid-template-areas: ". .";}#impressum {&nbsp; line-height: 1.5rem;&nbsp; font-size: 1rem;&nbsp; padding-left: 30px;&nbsp; padding-top: 4rem;&nbsp; height: 500px;}h3 {&nbsp; font-size: 1.2rem;}h4 {&nbsp; font-size: 1.2rem;&nbsp; text-transform: uppercase;}#datenschutz {&nbsp; line-height: 1.5rem;&nbsp; font-size: 1rem;&nbsp; padding-left: 30px;&nbsp; padding-top: 4rem;}#socialmedia {&nbsp; /* background-color: lightgreen; */&nbsp; text-align:center;}#backtotop {&nbsp; margin-top: 1rem;&nbsp; display: block;}/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */.hvr-sweep-to-top {&nbsp; display: inline-block;&nbsp; vertical-align: middle;&nbsp; -webkit-transform: perspective(1px) translateZ(0);&nbsp; transform: perspective(1px) translateZ(0);&nbsp; box-shadow: 0 0 1px rgba(0, 0, 0, 0);&nbsp; position: relative;&nbsp; -webkit-transition-property: color;&nbsp; transition-property: color;&nbsp; -webkit-transition-duration: 0.3s;&nbsp; transition-duration: 0.3s;}.hvr-sweep-to-top:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; z-index: -1;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; background: #f6bd60;&nbsp; -webkit-transform: scaleY(0);&nbsp; transform: scaleY(0);&nbsp; -webkit-transform-origin: 50% 100%;&nbsp; transform-origin: 50% 100%;&nbsp; -webkit-transition-property: transform;&nbsp; transition-property: transform;&nbsp; -webkit-transition-duration: 0.3s;&nbsp; transition-duration: 0.3s;&nbsp; -webkit-transition-timing-function: ease-out;&nbsp; transition-timing-function: ease-out;}.hvr-sweep-to-top:hover,.hvr-sweep-to-top:focus,.hvr-sweep-to-top:active {&nbsp; color: white;}.hvr-sweep-to-top:hover:before,.hvr-sweep-to-top:focus:before,.hvr-sweep-to-top:active:before {&nbsp; -webkit-transform: scaleY(1);&nbsp; transform: scaleY(1);}/* Hover Effekt Ende *//* Loader */.loader {&nbsp; display: inline-block;&nbsp; width: 30px;&nbsp; height: 30px;&nbsp; position: relative;&nbsp; border: 4px solid #Fff;&nbsp; animation: loader 2s infinite ease;}.loader-inner {&nbsp; vertical-align: top;&nbsp; display: inline-block;&nbsp; width: 100%;&nbsp; background-color: #fff;&nbsp; animation: loader-inner 2s infinite ease-in;}@keyframes loader {&nbsp; 0% {&nbsp; &nbsp; transform: rotate(0deg);&nbsp; }&nbsp; 25% {&nbsp; &nbsp; transform: rotate(180deg);&nbsp; }&nbsp; 50% {&nbsp; &nbsp; transform: rotate(180deg);&nbsp; }&nbsp; 75% {&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@keyframes loader-inner {&nbsp; 0% {&nbsp; &nbsp; height: 0%;&nbsp; }&nbsp; 25% {&nbsp; &nbsp; height: 0%;&nbsp; }&nbsp; 50% {&nbsp; &nbsp; height: 100%;&nbsp; }&nbsp; 75% {&nbsp; &nbsp; height: 100%;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; height: 0%;&nbsp; }}.loader-wrapper {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background-color: #242f3f;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; 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">&nbsp; <div class="body">&nbsp; &nbsp; <!-- Navigation -->&nbsp; &nbsp; <nav id="navbar">&nbsp; &nbsp; &nbsp; <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>&nbsp; &nbsp; &nbsp; <script src="javascript/navbar fixed.js"></script>&nbsp; &nbsp; &nbsp; <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png"></a>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </nav>&nbsp; &nbsp; <!-- body -->&nbsp; &nbsp; <div id="spacer"></div>&nbsp; &nbsp; <!-- home section -->&nbsp; &nbsp; <section id="home" class="section">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <!-- UberUns section -->&nbsp; &nbsp; <section id="wir-ueber-uns" class="section">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p>section 2</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <!-- Aktionen section -->&nbsp; &nbsp; <div id="reference"></div>&nbsp; &nbsp; <section id="aktionen" class="section">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p>section 3</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <!-- Terminvereinbarung section -->&nbsp; &nbsp; <section id="terminvereinbarung" class="section">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p>section 4</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <!-- Infos section -->&nbsp; &nbsp; <section id="infos" class="section">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p>section 5</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <footer>&nbsp; &nbsp; &nbsp; <div id="impressum">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Impressum</h3>&nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Optik Tack GmbH&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Icons von https://tablericons.com/ -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- map Icon -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/02y75n0W/map-pin.png" alt="mapicon" width="16" height="16"> Mozartstraße 37 <br> 73430 Aalen <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- phone Icon -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/wjPXGNJW/phone.png" alt="phoneicon" width="16" height="16"> Tel.: [phone] <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- at Icon -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/tJ5dSmtP/at.png" alt="aticon" width="16" height="16"> [e-mail] <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- bookmark Icon -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/T29PwXkG/bookmarks.png" alt="bookmarkicon" width="16" height="16"> www.optik-tack.de&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Geschäftsführer: Anton Tack <br> Amtsgericht Aalen <br> Handelsregister Nr. XXX000XXX, <br> Finanzamt Aalen <br> USt.IdNr.: DE10111011 <br>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="socialmedia">&nbsp; &nbsp; &nbsp; &nbsp; <!-- back to top Icon -->&nbsp; &nbsp; &nbsp; &nbsp; <a href="#home" id="backtotop">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/7hgtxV1Y/arrow-up-circle.png" alt="backtotopicon" width="75" height="75">&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="datenschutz">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Datenschutz</h3>&nbsp; &nbsp; &nbsp; &nbsp; <h4>Datenschutzhinweise</h4>&nbsp; &nbsp; &nbsp; &nbsp; <p>gemäß EU-Datenschutz-Grundverordnung (DSGVO)</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </footer>&nbsp; </div></div><!-- Animation am Anfang vom Laden der Seite --><div class="loader-wrapper">&nbsp; <span class="loader"><span class="loader-inner"></span></span></div><!-- Smooth Scroll Ende -->