jquery根据锚点offset值实现动画切换

想要实现根据锚点offset值实现动画切换的效果，需要经过以下步骤：

1. 监测锚点的click事件

首先，我们需要为锚点(a标签)添加click事件的监听。当用户点击锚点时，我们可以获取到被点击锚点的href属性值，即所要跳转到的锚点的标识符，例如#section1。

示例代码：

$(document).on('click', 'a', function (event) {
  // 阻止默认行为(即跳转到锚点处)
  event.preventDefault();
  // 获取被点击的锚点的href属性值
  var targetAnchor = $(this).attr('href');
  // 调用切换动画函数
  animateToTarget(targetAnchor);
});

2. 获取目标锚点的offset值

在切换到目标锚点时，我们需要获取目标锚点相对于文档顶部的偏移量(offset)，以达到平滑切换到目标位置的效果。

示例代码：

function animateToTarget(targetAnchor) {
  // 获取目标锚点的offset值
  var targetOffset = $(targetAnchor).offset().top;
  // 利用animate函数进行滚动平滑过渡
  $('html, body').animate({
    scrollTop: targetOffset
  }, 1000);
}

在上述示例代码中，我们使用了jQuery的offset()方法获取目标锚点的offset偏移量，接着使用了animate()函数实现了滚动平滑的过渡效果。

3. 示例说明

示例1：滚动导航栏切换

<nav id="nav">
  <a href="#section1">Section 1</a> 
  <a href="#section2">Section 2</a> 
  <a href="#section3">Section 3</a> 
</nav>

<section id="section1">第一节课</section>
<section id="section2">第二节课</section>
<section id="section3">第三节课</section>

$(document).on('click', '#nav a', function (event) {
  event.preventDefault();
  var targetAnchor = $(this).attr('href');
  animateToTarget(targetAnchor);
});

function animateToTarget(targetAnchor) {
  var targetOffset = $(targetAnchor).offset().top;
  $('html, body').animate({
    scrollTop: targetOffset
  }, 1000);
}

在这个示例中，我们首先创建了一个导航栏(nav)，其中包含若干个锚点(a标签)，分别对应三个不同的章节(section)。当用户点击导航栏中的锚点时，我们调用animateToTarget函数，实现平滑切换到目标锚点的效果。

示例2：自动高亮导航栏

<nav id="nav">
  <a href="#section1">Section 1</a> 
  <a href="#section2">Section 2</a> 
  <a href="#section3">Section 3</a> 
</nav>

<section id="section1">第一节课</section>
<section id="section2">第二节课</section>
<section id="section3">第三节课</section>

$(document).on('click', '#nav a', function (event) {
  event.preventDefault();
  var targetAnchor = $(this).attr('href');
  animateToTarget(targetAnchor);
});

$(document).scroll(function() {
  var sections = $('section');
  // 遍历章节，获取每个章节的offset值
  sections.each(function(i, section) {
    var sectionTop = $(section).offset().top;
    var sectionBottom = sectionTop + $(section).outerHeight();
    // 判断滚动位置是否处于该章节内，是则高亮导航栏中的锚点
    if ($(document).scrollTop() >= sectionTop && $(document).scrollTop() < sectionBottom) {
      $('#nav a').removeClass('active');
      $('#nav a[href="#'+$(section).attr('id')+'"]').addClass('active');
    }
  });
});

function animateToTarget(targetAnchor) {
  var targetOffset = $(targetAnchor).offset().top;
  $('html, body').animate({
    scrollTop: targetOffset
  }, 1000);
}

在这个示例中，我们首先创建了一个导航栏(nav)，其中包含若干个锚点(a标签)，分别对应三个不同的章节(section)。当用户点击导航栏中的锚点时，我们调用animateToTarget函数，实现平滑切换到目标锚点的效果。

此外，我们还对$(document)绑定了scroll事件的监听，每当滚动页面时，遍历章节(section)，获取各个章节的offset值。当滚动位置处于某一章节内时，我们就高亮导航栏中该章节对应的锚点，实现了滚动页面时导航栏中锚点的自动高亮效果。