平滑滚动到另一个页面锚点

Question

我在主页上有计划部分，当我单击计划时（在顶部导航栏中），我还有其他页面，它可以平滑地在主页上完美滚动，但在其他单独的页面上则无效！

为此，我尝试了几种解决方案，但并没有达到预期的效果。

我的HTML代码：

<ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" data-value="home">home</a></li>
    <li class="nav-item"><a class="nav-link" data-value="services">services</a> 
</li>
    <li class="nav-item"><a class="nav-link" data-value="recent-posts">posts</a> 
</li>
    <li class="nav-item"><a class="nav-link" data-value="plans">plans</a></li>
    <li class="nav-item"><a class="nav-link" data-value="more">more..</a></li>
</ul>

我的js代码：

$('header .navbar-nav > li > a, .services .arrow > .arrowDown').click(function () {
    $('html').animate({
        scrollTop: $('#' + $(this).data('value')).offset().top
    }, 500);
});

我期望当我按下链接时，我在另一个页面上，它应该加载主页，并向下滚动到我的主页上的部分。

我基本上是一个初学者，我不太了解，如果不能更好地解释我的问题，我感到抱歉。

---

编辑：我尝试了另一种方法来解决我的问题，但是，我面临着一个新方法。我所做的是检查当前页面的ID是否具有特定值？如果是，那么我可以平滑滚动到该部分，否则我必须重定向到主页，然后滚动该特定部分。

我的新代码是：

$('header .navbar-nav > li > a, .services .arrow > .arrowDown').click(function () {
  // check if $(this).data('value') exist in the current page
  if ($('#' + $(this).data('value')).length) {
    // smooth scroll to that element
    $('html').animate({
      scrollTop: $('#' + $(this).data('value')).offset().top
    }, 500);
  }
  // else load the homepage, then scroll to that element
  else { 
    document.location.href = "/";
    $('html').animate({
      scrollTop: $('#' + $(this).data('value')).offset().top
    }, 500);
    // console.log('this item doesn\'t exist in the current page')
  }
});

我期望的是，如果当前页面不是主页&&并且数据值在当前页面中不存在，那么我必须重定向到（主页）并平滑滚动到该特定部分。

非常感谢。

Answer 1

这是我自己的解决方案，它可以起作用：

// == Smooth scroll to section == //
$('header .navbar-nav > li > a, .services .arrow > .arrowDown').click(function () {
    // check if $(this).data('value') exist in the current page
    if ($('#' + $(this).data('value')).length) {
        // smooth scroll to that element
        $('html').animate({
            scrollTop: $('#' + $(this).data('value')).offset().top
        }, 500);
    }
    // else load the homepage, then scroll to that element
    else { 
        document.location.href = "/kazamiza/" + '#' + $(this).data('value');
    }
});