Question

第一次在这里发帖！堆栈溢出告诉我包含codepen.io中的代码，所以我做了，但我认为实际链接比从这里读取代码更有用。

我将此http://codepen.io/haustraliaer/pen/leKny/ javascript代码应用于我的网站，效果很好。我想滚动浏览页面以更新链接，这样当我向下滚动并单击下一步时，它不会返回上一个锚链接所在的位置。

我尝试使用滚动事件和getBoundingClientRect，但似乎我无法让它像那样工作。

对解决方案的任何帮助都会对我有所帮助。

这是指向我的主页http://quki.kapsi.fi/wasd

的链接

$('.js-scroll-to').click(function(e) {

    target = $($(this).attr('href'));

    if (target.offset()) {
        $('html, body').animate({
            scrollTop: target.offset().top + 'px'
        }, 600);
    }

    e.preventDefault();
});

$('.js-next').click(function(e) {

    var selected = $(".js-list-item.js-current-panel");
    var anchors = $(".js-list-item");

    var pos = anchors.index(selected);
    var next = anchors.get(pos + 1);
    var prev = anchors.get(pos - 1);

    target = $(next);

    $(selected).removeClass("js-current-panel");
    $(next).addClass("js-current-panel");

    if (target.offset()) {
        $('html, body').animate({
            scrollTop: target.offset().top + 'px'
        }, 600);
    }


    e.preventDefault();
});


$('.js-prev').click(function(e) {

    var selected = $(".js-list-item.js-current-panel");
    var anchors = $(".js-list-item");

    var pos = anchors.index(selected);
    var next = anchors.get(pos + 1);
    var prev = anchors.get(pos - 1);

    target = $(prev);

    $(selected).removeClass("js-current-panel");
    $(prev).addClass("js-current-panel");

    if (target.offset()) {
        $('html, body').animate({
            scrollTop: target.offset().top + 'px'
        }, 600);
    }


    e.preventDefault();
});

Answer 1

$('.js-scroll-to').click(function(e) {

  target = $($(this).attr('href'));

  if (target.offset()) {
    $('html, body').animate({
      scrollTop: target.offset().top + 'px'
    }, 600);
  }

  e.preventDefault();
});

$('.js-next').click(function(e) {
  $('.js-prev').show();
  var selected = $(".js-list-item.js-current-panel");
  var anchors = $(".js-list-item");
  var pos = anchors.index(selected);
  var next = anchors.get(pos + 1);
  var prev = anchors.get(pos - 1);
  if (pos <= 4) {
    target = $(next);
    $(selected).removeClass("js-current-panel");
    $(next).addClass("js-current-panel");
    if (target.offset()) {
      $('html, body').animate({
        scrollTop: target.offset().top + 'px'
      }, 600);
    }
    if (pos == 4)
      $('.js-next').hide();
  }

  e.preventDefault();
});

$('.js-prev').click(function(e) {
  $('.js-next').show();
  var selected = $(".js-list-item.js-current-panel");
  var anchors = $(".js-list-item");

  var pos = anchors.index(selected);
  var next = anchors.get(pos + 1);
  var prev = anchors.get(pos - 1);
  console.log(pos)
  if (pos > 0) {
    target = $(prev);

    $(selected).removeClass("js-current-panel");
    $(prev).addClass("js-current-panel");

    if (target.offset()) {
      $('html, body').animate({
        scrollTop: target.offset().top + 'px'
      }, 600);
    }
  }
  if (pos == 1) {
    $('.js-prev').hide();
  }
  e.preventDefault();
});

以下是工作示例

http://codepen.io/krishnareddy668/pen/MyqwJz

下一个/上一个锚链接，如何在用户滚动时更新下一个/上一个链接

1 个答案: