Question

点击锚点链接（带有哈希的链接，#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匹配agains文档网址来修复它，以便在链接没有定位当前页面和类似的解决方法时禁用该功能，但无论我做什么，似乎都会出现问题。

你们有没有成功实现过这个？您如何可靠地执行此操作并使所有链接正常工作？

HTML示例

网址实际上是year/quarter/week#day。

  <!-- 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>

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

0 个答案: