从一个页面平滑滚动到另一页面中的特定部分 [英] Smooth scrolling from one page to a specific section in another page

问题描述

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

I building a website in which the homepage has a contact form section and the other pages don't have it. Using Jquery, I made sure that when a user click on the contact link in the navbar on the homepage, the page will scroll down to the contact form section. Let's say a user is on the About Us page and clicks on the contact link, I want the website to take the user back to the homepage and scroll down to the contact form section. Is it possible??

感谢您的回答.

推荐答案

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

you can scroll down to the target easily using the id's and scroll function script below.

<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 使用以下语法向下滚动到您需要的部分

you can scroll down to the section you need by using # and href by using the below syntax

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

如果您想定位其他页面中的部分，只需使用后跟目标部分 ID 的链接

If you want to target the section in other page just use the link followed by the target section Id

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

target URL 和 section Id

target URL along with the section Id

希望这是您正在寻找的..

Hope this is what you are looking for..

这篇关于从一个页面平滑滚动到另一页面中的特定部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！