锚点跳转动画问题

Question

关于我的网站，我有一个问题：我想使用JQuery来动画显示“锚点跳转”，我正在使用下面的代码。我认为这应该可以工作，但实际上并没有。

还有一点需要说明的是：每当标题中的任何按钮被按下时，都应该执行锚点跳转。

$(function () {
    $("a").click(function () {
        if (this.hash) {
            var hash = this.hash.substr(1);

            var $scrollToElement = $("a[name=" + hash + "]");
            var scrollToPosition = $scrollToElement.position().top;

            $("html, body").animate({
                scrollTop: scrollToPosition
            }, 1000, "swing");

            return false;
        }
    });
});

<div name="home" id="body_container">
    <div id="banner_container">
        <img id="banner" />
    </div>
    <div id="content_container">
        <div name="over" id="over_content"></div>
        <div name="contact" id="contact_content"></div>
    </div>
</div>

您可以在JSFiddle中查看所有代码。

- YSbakker

---

你是否在寻找类似于这个的东西？ - Harry

@Harry 有点像，是啊！但你知道为什么第二个按钮会将页面滚动回顶部吗？如果你能解释一下并在答案中发布，我的问题就解决了！ - YSbakker

那是因为position().top可能由于您的固定位置元素而没有返回正确的值。我会找出原因并发布一个答案（或者如果您愿意，我现在可以发布一个答案并稍后更新该部分）。 - Harry

@Harry 不用着急，我宁愿要一个完整的答案 ;) 感谢你的辛勤工作！ - YSbakker

我添加了一个答案，只是为了解释其他部分。如果您接受了其他答案并解决了您的问题，我不介意。 - Harry

Answer 1

除了Harry的解决方案，您应该将 var scrollToPosition = $scrollToElement.position().top; 更改为 var scrollToPosition = $scrollToElement.offset().top; position（）会给出相对于容器的偏移量（在您的情况下为0），而offset将为您提供到整个文档的偏移量，这有助于您正确滚动。请尝试此http：//jsfiddle.net/eax7ppwb/2/。

- lozy219

---

也许 var scrollToPosition = $scrollToElement.offset().top - $('header').height(); 更好一些。 - lozy219

啊，你让我有点左右为难了伙计。我刚刚发现并且正在更新相同的内容。或许因为你已经发布了，我会发布答案的其他部分并将+1作为你的贡献:) - Harry

@Harry 很抱歉:( 我看到你刚刚评论了20分钟，当我发布时不知道你正在处理这个问题。 - lozy219

谢谢，那个有效。现在说一下题外话，更改菜单项的类别最好的方法是什么（这样你点击的就会被选中）？我感觉有一个非常简单的jQuery解决方案，但我已经知道它将是很多行Javascript代码。 - YSbakker

@YSbakker 在 http://jsfiddle.net/eax7ppwb/4/ 中，'selected' 类被添加到了 <a> 标签上，实际上你需要为 menuItem 类设置样式。 - lozy219

Answer 2

你的代码存在一些问题，这些问题导致代码无法按照预期工作。它们如下：

• this.hash 引用了 URL 中的目标部分。为了返回一个值，你的锚点标签 href 必须设置（例如：<a href ='#over'）。
• 当任何链接被点击时，页面必须动画到相应内容所在的页面部分。为此，你应该针对所需名称的 div 而不是 a 标签进行操作。如果你获取 a 标签的 top 并尝试在那里进行动画处理，将没有任何移动，因为那是你单击的同一标签。

下面的代码段解决了这两个问题，并且可以按照你的预期工作：（注意：由于lozy219的答案，代码片段的位置问题也得到了解决。）

$(function() {
  $("a").click(function() {
    if (this.hash) {
      var hash = this.hash.substr(1);

      var $scrollToElement = $("div[name=" + hash + "]");
      var headerHeight = $('header').height();
      var scrollToPosition = $scrollToElement.offset().top - headerHeight;

      $("html, body").animate({
        scrollTop: scrollToPosition
      }, 1000, "swing");

      /* To add/remove class */
      $('.menuItem').removeClass('selected'); // first remove class from all menu items
      $(this).children('.menuItem').addClass('selected'); // then add to the clicked item
      
      return false;
    }
  });
});

* {
  padding: 0;
  margin: 0 auto;
  text-decoration: none;
}
body {
  background: rgb(223, 227, 238);
  text-align: center;
}
header {
  min-width: 100%;
  background: rgb(50, 50, 50);
  height: 80px;
  position: fixed;
  z-index: 10;
}
#header_container {
  max-width: 1024px;
  height: 100%;
}
#header_container div {
  float: left;
  display: inline-block;
  width: 25%;
}
#logo {
  width: 50%;
  height: auto;
}
.menuItem {
  padding-top: 29px;
  height: calc(100% - 29px);
  border: 0;
  text-align: center;
  font-family: Signika;
  font-size: 25px;
  color: rgb(203, 207, 218);
}
.menuItem:hover {
  border-bottom: 4px solid rgb(59, 89, 202);
  height: calc(100% - 33px);
  color: rgb(160, 170, 218);
}
.selected {
  border-bottom: 4px solid rgb(59, 89, 202);
  height: calc(100% - 33px);
  color: rgb(160, 170, 218);
}
.menuLogo {
  padding-top: 14.5px;
  height: calc(100% - 14.5px);
  border: 0;
  text-align: center;
}
#mobile_menu_button {
  display: none;
}
#body_container {
  padding-top: 80px;
}
#banner_container {
  position: fixed;
  left: 0;
  right: 0;
}
#banner {
  width: 1024px;
  height: auto;
}
#content_container {
  background: rgb(235, 235, 240);
  max-width: 1024px;
  height: 100%;
  position: relative;
  top: 300px;
  box-shadow: 0px 5px 10px rgb(235, 235, 240);
  -webkit-box-shadow: 0px 5px 10px rgb(235, 235, 240);
}
#over_content {
  width: 100%;
  height: 1000px;
}
#contact_content {
  background-color: rgb(200, 200, 200);
  height: 1000px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="header_container">
    <div class="menuLogo">
      <img id="logo" />
    </div>
    <a href="#home">
      <div id="homeButton" class="menuItem selected">Home</div>
    </a>
    <a href="#over">
      <div id="overButton" class="menuItem">Over</div>
    </a>
    <a href="#contact">
      <div id="contactButton" class="menuItem">Contact</div>
    </a>

    <div id="mobile_menu_button"></div>
  </div>
</header>
<div name="home" id="body_container">
  <div id="banner_container">
    <img id="banner" />
  </div>
  <div id="content_container">
    <div name="over" id="over_content">Over menu's content</div>
    <div name="contact" id="contact_content">Contact menu's content</div>
  </div>
</div>

- Harry

---

@YSbakker：更新后的代码片段按需执行添加/删除类操作。 - Harry