个人中心
gpt4 book ai didi

javascript - 平滑滚动都是小故障! (这是方形空间上的代码块)

转载 作者：行者123 更新时间：2023-11-28 05:45:51 25 4
gpt4 key购买 nike

当我点击“探索”按钮时，它似乎出现故障，就像它试图向下滚动两次或其他什么。该网站是一个方形网站，我想也许我误解了防止默认行为部分。感谢您的帮助。

滚动也是这样编码的:

要查看出现了什么问题，请点击链接:wolfcreatives.com

谢谢!!

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

<body>

<a id="explore" href="#section2"><span>EXPLORE </span></a>

<div class="main">
  <section></section>
</div>

<style>
#explore {
  display: block;
  margin: auto;
  text-align: center;
  background-color: Transparent;
  border: solid 2px white;
  color: #FFFFFF;
  font-size: 12px;
  font-family: raleway;
  letter-spacing: 2.5px;
  padding: 15px;
  width: 110px;
  transition: all 0.5s;
  cursor: pointer;
}

#explore span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#explore span:after {
  content: '⇩';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0s;
}

#explore:hover span {
  padding-right: 25px;
}

#explore:hover {
  background-color: white;
  color: black;
}

#explore:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

最佳答案

您需要防止事件向上传播 DOM 树 - StopImmediatePropagation

此外，如果您只想在探索按钮上滚动，您可以使用比标签名称更具体的选择器。例如，您可以使用 id #explore 作为选择器

JS:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("#explore").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      event.stopImmediatePropagation();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

关于javascript - 平滑滚动都是小故障! (这是方形空间上的代码块)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37616440/

25 4 0
文章推荐： ios - 获取推特好友列表？
文章推荐： html - 如何在菜单导航中添加类别搜索栏并将其居中？
文章推荐： swift - 如何在 mapkit 中获取到最近引脚的方向
文章推荐： angularjs - 如何修复具有动态背景位置的移动设备上的滞后/剪辑？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com