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>
    </div>
  </div>

我的所有部分都与锚点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);
});
});

在这里，我试图获得点击的锚标签的价值，并使用它来滚动我的身体只需摆脱＃并添加'。'所以针对我的部门类名。不幸的是，不起作用。

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

有什么想法吗？

感谢。

Answer 1

拆分后，它将转换为数组。让我们说，

var url = "#home";

所以用url.split分拆后（＆＃34;＃＆＃34;）

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

所以，如果您不想将其分配给变量，那么您可以直接使用如下

url.split("#")[1]

您还需要阻止默认的锚标记事件。要做到这一点，

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

   // your code

 });

如何获取href的值并使其滚动到锚点

1 个答案: