jquery滚动到元素不起作用 - 滚动到随机位置答案

【问题标题】：jquery scroll to element not working - scrolls to random placesjquery滚动到元素不起作用 - 滚动到随机位置
【发布时间】：2015-06-16 13:14:44
【问题描述】：

有很多关于此的 stackoverflow 问题，但我找不到答案。我有这个 javascript 代码：

$(function() {
      $('a[href*=#]:not([href=#])').click(function() {

        $('html,body, .main').animate({
          scrollTop: $(this.hash).offset().top - 10
        }, 1000);

      });
    });

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--[if gt IE 8]><!--><link rel="stylesheet" href="styles.css"><!--<![endif]-->
    <link rel="stylesheet" href="common.css">
    <script src="responsive-nav.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="scripts/extraScripts.js"></script>

  </head>
  <body>

    <div role="navigation" id="foo" class="nav-collapse">
      <ul>
        <li class="active"><a href="#section1">Inicio</a></li>
        <li><a href="#section2">Equipo</a></li>
        <li><a href="#section3">Sistemas</a></li>
        <li><a href="#section4">Desarrollo</a></li>
      </ul>
    </div>

<div role="main" class="main">

    <a href="#nav" class="nav-toggle">Menu</a>

    <div class = "section" id = "section1" >

        <!-- some stuff -->

    </div> 

    <div class = "section" id = "section2">

        <!-- some stuff -->

    </div>  

    <div class = "section" id = "section3">

      <!-- some stuff -->

    </div>

    <div class = "section" id = "section4" >

            <!-- some stuff -->
    </div>

</div>  

<script>
  var navigation = responsiveNav("foo", {customToggle: ".nav-toggle"});
</script>

  </body>

</html>

所以我使用的是我在网上找到的模板。它在左侧有一个精美的菜单，然后在中间有一个主要内容。一切都在里面：

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

我希望当单击菜单上的链接时，它会滚动到特定部分（#section1、#section2、#section3、#section4）。现在它在我第一次单击其中一个链接时有效，但第二次它转到一个随机位置。

任何线索为什么会发生这种情况？

--- 更新 ----

我尝试了所有提到的解决方案，但都不起作用。我认为这与我为主容器（.main 类）所拥有的 CSS 有关。看一下代码（我从我正在使用的库中获取此代码）：

.main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding: 3em 4em;
  position: fixed;
  overflow: hidden;
  overflow-y: scroll;
  border-top-left-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0, .6);
  top: .8em;
  right: 0;
  bottom: 0;
  width: 76%;
  background: #fff;
}

.main::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: rgba(0,0,0, .15);
  width: 8px;
  height: 8px;
}

.main::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(0,0,0, .4);
}

我尝试删除上面的 CSS 代码并使用它，它可以工作：

$(function() {
      $('a[href*=#]:not([href=#])').click(function() {

        $('html,body, .main').animate({
          scrollTop: $(this.hash).offset().top - 10
        }, 1000);

      });
    });

但我需要那个 CSS。有什么办法可以解决吗？

【问题讨论】：

$(this.hash) 中的 this 是 html/body 而不是 <a>。将其存储在动画上方的变量中，然后传递值。
你的代码工作正常jsfiddle.net/rwfLn6vy有足够的身高
@Mihail 它不起作用。我认为这与我的菜单（外部代码）的 CSS 有关。我现在将发布代码
所以看起来问题是容器 .main 有一个位置：固定。如果我删除它，它工作正常。固定位置让我可以在左侧看到精美的菜单。我可以用 Javascript 做什么来使它工作？

标签： javascript jquery html scroll

【解决方案1】：

您的问题是您对单击的链接的上下文有一个奇怪的调用$(this.hash)。在闭包之外更改为that = $(this) 解决了问题。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    var that = $(this);
    $('html,body, .main').animate({
      scrollTop: that.offset().top - 10
    }, 1000);

  });
});

这是Plunker

稍后！！

【讨论】：

它不工作。我认为这与我用于菜单的 CSS 有关。我现在将发布 CSS 代码