Javascript 如何实现哈希链接的可靠平滑滚动

我试图在单击锚链接（带有散列的链接，

#something

）时在我的站点上实现平滑滚动

问题是，如果没有一些工作不正常的东西，我无法想出如何实现它

当前解决方案

我有几个代表周的页面，每个工作日都有标题（

#1

，

#2

，…）和它们的链接（

#1-marker

，

#1-marker

，…）。由于它们不匹配，内置浏览器滚动被禁用。然后，我使用以下脚本使它们在加载和链接单击时工作：

$(function()
{
    // Handle anchor reference links
    $('a[href*=#]')
        .click(onAnchorClick);

    // Smooth school to hash on load if any in URL
    if(location.hash)
        $(location.hash+'-marker')
            .smoothScroll();
});


function onAnchorClick(event)
{
    // Scroll to 0 if hash is #top
    if(this.hash == '#top')
    {
        scrollTo(0);
        return false;
    }
    // Try smooth scroll. Return true for default behavior if hash
    // isn't on the current page
    return $(this.hash+'-marker').smoothScroll() ? false : true;
}


$.fn.smoothScroll = function()
{
    // If we have any elements to work on
    if(this.exists())
    {
        // Scroll to top of the target
        scrollTo(this.offset().top);
        return this;
    }
    return false;
}


$.fn.exists = function()
{
    // Used to check if a selector got any elements back
    return this.length > 0 ? this : false;
}


function scrollTo(target)
{
    // Animate scrollTop
    $('html,body')
        .animate({scrollTop: target}, 500);
}

单击链接时，它会检查当前页面上是否存在目标哈希。如果有，它会滚动到它，如果没有，链接会像往常一样工作并切换页面

问题

我认为这很有效，但后来我发现了一个小问题：我有一个全球链接，可以快速访问当前的一周和一天。问题是，因为所有的周页面都有相同的链接，所以快速访问链接甚至在其他周也匹配。因此，如果我在第40周，当前一周是50周，我点击周四，它会在第40周的周四而不是第50周

我曾尝试使用href matching agains document url来修复它，当链接不针对当前页面时禁用该功能，以及类似的解决方法，但无论我做什么，似乎都有问题

你们中有人成功地实现了这一点吗？您如何可靠地执行此操作并使所有链接正常工作

---

一些示例HTML

URL实际上是

年/季度/周#天

  <!-- Quick access to current day in current week -->
  <aside id="go-today">
    <a href="2014/1/13#1" title="Go to Today">Today</a>
  </aside>

  <!-- Regular list on a page which can be to any week-->
<ul class="listing days">
    <li><a href="2014/1/13#1">Søndag</li>
    <li><a href="2014/1/13#2">Mandag</li>
    <li><a href="2014/1/13#3">Tirsdag</li>
    <li><a href="2014/1/13#4">Onsdag</li>
    <li><a href="2014/1/13#5">Torsdag</li>
    <li><a href="2014/1/13#6">Fredag</li>
    <li><a href="2014/1/13#7">Lørdag</li>
</ul>


  <!-- Toolbar for quick access to days in week being viewed -->
<div id="toolbar">
  <a href="2014/1/13#1" title="Søndag">Sø</a>
  <a href="2014/1/13#2" title="Mandag">Ma</a>
  <a href="2014/1/13#3" title="Tirsdag">Ti</a>
  <a href="2014/1/13#4" title="Onsdag">On</a>
  <a href="2014/1/13#5" title="Torsdag">To</a>
  <a href="2014/1/13#6" title="Fredag">Fr</a>
  <a href="2014/1/13#7" title="Lørdag">Lø</a>
  <a href="2014/1/13#top" title="Topp">
    <img src="_/up-arrow.svg" class="icon"/>
  </a>
</div>

  <!-- Example of a target marker id -->
  <article class="day">
      <h2>
          <span class="marker" id="2-marker"/>
          <a href="2014/1/13#2">Mandag</a>
      </h2>

你能演示一些html吗？这是一个一天的例子<代码>？？？您的操作方式需要调整。你能给今天的元素和本周的元素添加一个class

current

，还是你没有这种能力？我有完全的控制权，所以是的，我最终完全改变了冲突的URL，这样问题就不再是问题了，尽管这仍然是个问题，呵呵。所以它现在起作用了，但问题仍然存在，所以仍然好奇是否有可靠的方法来做到这一点。如果有人知道，请分享：）