Question

我是Web Dev的新手，我想创建一个可以使用侧面导航栏向上和向下滚动到多个锚点的网站。

这是我的HTML代码，

<body>
 <div id="mySideDiv" class="divAnimate">
  <p id="head">HYUNJAE<br>WOO</p>
  <div class="side"><a href="#home">HOME</a></div>
  <div class="side"><a href="#portfolio">PORTFOLIO</a></div>
  <div class="side"><a href="#contact">CONTACT</a></div>
  <div class="side"><a href="#about">ABOUT</a></div>
 </div>

 <div class="mid-cont homePage" id="main">
  <article class="panel"><a id="home"></a>
   <p> Welcome to My Website </p>
   ...
  </article>

  <article class="panel"><a id="portfolio"></a>
   <p> PORTFORLIO </p><br>
   ...
  </article>

  <article class="panel"><a id="contact"></a>
   <p> CONTACT </p><br>
   ...
</article>

<article class="panel"><a id="about"></a>
  <p> ABOUT </p><br>
  ...
</article>

我有这个只使用标签，但我希望每次点击侧栏（我的侧栏固定在位置）时平滑过渡/滚动到锚。我已经在互联网上搜索过，并使用jQuery或javascript找到了一些答案，但它们只有在进行顶部到底部滚动时才能运行。每当我尝试从CONTACT到PORTFOLIO时，它都会将屏幕放在HOME和PORTFOLIO之间。我觉得答案非常明显，但我无法弄明白为什么......请帮助我。

Answer 1

您可以使用以下代码来实现此类功能：

$(".same-page-links").on("click", function(e){
  e.preventDefault();
  var target = $(this).attr("href");
  if( $(""+target).length )
  {
    var targetOffset = $(""+target).offset().top;
    $("html, body").animate({"scrollTop": targetOffset}, 500);
  }
});//click

在这里，我假设所有这些链接都有一个类“same-page-links”。单击此类链接，您可以从其href属性或任何其他属性中获取目标元素的ID。完成后，您只需要知道该元素的offset().top并使用jQuery animate方法滚动到该偏移量。

还有一件事，您应该将这些ID分配给这些文章本身，而不是创建空的a元素来包含您的目标ID。例如而不是

<article class="panel"><a id="about"></a>

你应该这样做

<article id="about" class="panel">

Answer 2

您是否检查过this？你的HTML代码将是：

<div class="side"><a href="#home" onclick="SmoothScroll()">HOME</a></div>

function SmoothScroll() {
    e.preventDefault();
    var target = $(this).attr("href");
    $('html, body').animate({
        scrollTop: $(""+target).offset().top
    }, 2000);}

平滑向上和向下滚动到多个锚点

2 个答案: