0

我对 javascript 很陌生，不知道如何自己添加它。

    $(document).ready(function() {
  $('.nav a').on('click', function(e) {
    e.preventDefault();

    var target = $(this).attr('href'),
      offset = $(target).offset().top - 70;

    $('html, body').stop().animate({
      scrollTop: offset
    }, 500);
  });
$('.scroll ul li').click(function(e) {
  var $this = $(this);
  var prev = $(this).parent().find('.active');
  prev.removeClass('active');
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});
});

这就是我正在使用的滚动代码，它对我的​​导航栏非常有用！

但我刚刚添加了这个按钮

  <a href="#about" class="btn btn-circle page-scroll">
    <i class="fa fa-angle-double-down animated"></i>

如何使脚本也以相同的方式与该按钮一起使用？ http://codepen.io/sbxn14/pen/egmKRr <-- 我的 codepen 包含这个网站。

我希望有一个人可以帮助我。

编辑：
当我添加它时。如果我手动滚动页面，是否可以使导航栏上的活动链接切换？我一直在谷歌上寻找这个，但没有找到任何东西。

4

1 回答 1

0

要让您的按钮像导航栏中的链接一样滚动，您只需将新类添加到单击处理程序即可。

代替：

$('.nav a').on('click', function(e) {

您只需将新类添加到单击处理程序，如下所示：

$('.nav a, .page-scroll').on('click', function(e) {

或者，您可以这样做：

$('.nav a').add('.page-scroll').on('click', function(e) {

您还可以通过在.active单击按钮时将类添加到相应的导航栏段来使导航栏突出显示新可见的区域，如下所示：

$('.page-scroll').click(function(e) {
   $('.navbar-nav li:nth-child(2)').addClass('active');
});

这是一个更新的笔，展示了滚动到该About部分的按钮以及更改导航栏突出显示的部分。

希望这可以帮助！:)

于 2017-01-06T02:58:11.387 回答