从一页平滑滚动到另一页的特定部分

Question

我建立了一个网站，该网站的主页上有联系表单部分，而其他页面则没有。 使用Jquery，我可以确保当用户单击主页导航栏中的联系链接时，页面将向下滚动到“联系表单”部分。 假设某个用户在“关于我们”页面上，然后单击“联系”链接，我希望网站将用户带回到首页并向下滚动到“联系表单”部分。 可能吗？？

感谢您的回答。

Answer 1

您可以使用下面的ID和滚动功能脚本轻松向下滚动到目标。

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }
  });
});
</script>

您可以使用以下语法使用＃和href向下滚动到所需的部分

<a href="#section_target">Click Me to Smooth Scroll to Section Below</a>

如果您要定位其他页面中的该部分，请使用链接，后跟目标部分ID

<a href="index.html#section_target">Take to target section in homepage</a>

目标网址以及ID部分

希望这是您想要的。