Javascript 转换到页面上的定位点

我的页面顶部有我的导航链接。我将每个链接锚定到页面下方相应的div。我无法让它转换，它只是自动跳转。我已经试过了。我的代码是：

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home" onclick="test('home'); return false;">HOME</a></li>
    <li><a href="#about" onclick="test('about'); return false;"> ABOUT</a></li>
    <li><a href="#portfolio" onclick="test('portfolio'); return false;"> PORTFOLIO</a></li>
    <li><a href="#projects" onclick="test('projects'); return false;"> PROJECTS</a></li>
    <li><a href="#contact" onclick="test('contact'); return false;"> CONTACT</a></li>
  </ul>

<div class = "vertSpace" id = "home">
<div class="jumbotron">
  <h1>Join The Information Superhighway For Free</h1>
  <hr>
  <p></p>
</div>
</div>

<div class = "vertSpace" id = "about">
<div class="jumbotron">
  <h1>About Me</h1>
  <hr>
  <p></p>
</div>
</div>

---

您需要将事件传递给它，以阻止它执行默认操作并跳转到元素

function test(e, elID)
{
    e.preventDefault();
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

在HTML中

onclick="test(event, 'about');"

---

关于这个问题，我已经有了一个代码笔

执行“平滑滚动”的最佳JS函数如下：

---

下面是一个简单的jQuery解决方案：

var $root = $('html, body');
$('ul li a').click(function () {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

---

可以使用原始实现解决此问题，而无需jQuery：

首先，它抛出了一个“元素”未定义的错误；您应将其替换为：

document.body.scrollTop;

另外，为了更好的重用性，我建议您使用eventListeners而不是

onclick

---

我添加了这段代码，现在它甚至都不会出现在锚上。我可能做错了。我对Javascript非常陌生。更新的钢笔。

var $root = $('html, body');
$('ul li a').click(function () {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

document.body.scrollTop;