单击事件将我重定向到网站顶部（内部代码片段）

Question

我正在尝试构建一个包含 3 张图片的轮播，但我不知道为什么当我按下 "next" 按钮时它会出现在网站顶部而不是更改图片。我将 post 这里是一个代码片段，也许我遗漏了一些小东西，但我盯着代码看了 2 个小时。

带"dots"的代码我不用了，请无视

var slideIndex = 1;
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

showSlides(slideIndex);
next.addEventListener('click', plusSlides(1))
next.addEventListener('click', plusSlides(-1))
// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("product");
    //   var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    //   for (i = 0; i < dots.length; i++) {
    //       dots[i].className = dots[i].className.replace(" active", "");
    //   }
    slides[slideIndex - 1].style.display = "block";
    //   dots[slideIndex-1].className += " active";
}

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: .95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
  height: 1000px;
  margin: auto;
  position: relative;
  background: grey;
}

#section-one .slideshow-container .product {
  display: none;
}

#section-one .slideshow-container .product .img {
  background: url("https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg") no-repeat center center/cover;
  height: 1000px;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

  <!-- Section-one -->
    <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div class="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
      </div>
    </section>

Answer 1

您需要将 href="#" 替换为 href="javascript:void(0);"，因为 '#' 与 href 一起使用以允许滚动，如果您使用 '#id'，您将重定向到 id='id'元素，当您不提供 id 时，它会转到网页顶部。

Answer 2

替换为 WIEW MORE ===> WIEW MORE 或删除标签 a 中的 href，javascript:void(0) 是 JavaScript 动作，但它不是事件，您可以添加 id 或 class 然后执行您想要的动作。

Answer 3

除了已经提供的答案之外，您还可以通过从 link 中完全删除 href 属性来防止这种情况发生。另一种方法是向事件侦听器添加回调函数并使用 event.preventDefault();。

像这样： next.addEventListener('click', (event) => { event.preventDefault(); plusSlides(1); });

单击事件将我重定向到网站顶部（内部代码片段）

Click event redirects me to the top of the website(code snippet inside)

javascript

slider

carousel