javascript - 如何获取 href 的值并使其滚动到 anchor

Question

所以我尝试使用 jquery 使我的导航可滚动，但由于某种原因，它不起作用。我尝试了很多解决方案，但似乎都没有用。

我的代码:

HTML:

<nav class="column column-12 navigation nav">
    <ul>
        <li class="active onee"><a href="#home" class="scrollable">Home</a></li>
        <li class="onee"><a href="#portfolio" class="scrollable">Portfolio</a></li>
        <li class="onee"><a href="#about" class="scrollable">About</a></li>
        <li class="onee"><a href="#contact" class="scrollable">Contact</a></li>
    </ul>
</nav>

我的所有部分都与 anchor href 具有相同的类。

jQuery:

$(document).ready(function() {
    $(".nav li").click(function() {
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });

    var $clicked = $("a")
        .attr("href")
        .split("#")
        .val();
        $("a").click(function() {
            /*$(this).find('a').attr('href').split("#");*/
            var url = $(this).attr("href");
            $("body").animate({
                /*scrollTop: $( '.' + $kazkas).offset().top}, 1000);*/
                scrollTop: $("." + url.split("#")).offset().top},1000);
        });
});

在这里，我试图获取单击的 anchor 标记的值，并通过去掉 # 并添加 '.' 来使用它来滚动我的 body 。所以针对我的部分类名。不幸的是，不起作用。

完整代码可以在我的代码笔上找到:http://codepen.io/Limpuls/pen/YGdmkW

有什么想法吗？

谢谢。

Answer 1

Split后，会转为数组。比方说，

var url = "#home";

所以在用 url.split("#") 分割之后

var arr = url.split("#");
//  arr[0] = ''
//  arr[1] = "home"

所以如果你不想把它赋值给变量那么你可以像下面这样直接使用

url.split("#")[1] 

您还需要防止默认 anchor 标记事件。这样做，

 $("a").click(function (e) {
    e.preventDefault();
    e.stopPropagation();

   // your code

 });