如何使用HTML或jQuery重定向到一个页面的特定部分

如何使用HTML或jQuery重定向到一个页面的特定部分

方法1:使用HTML

人们可以使用锚定标签来重定向到同一页面的某个特定部分。你需要在你想显示的部分添加 “id属性”,并在href属性中使用相同的id,在锚标签中使用 “#”。这样,当点击一个特定的链接时,你就会被重定向到锚标签中提到的具有相同id的部分。

语法:

//anchor tag
<a href="#home_section">home</a>
<section id="home_section">Information About Page</section>

例子 。当用户点击 “联系我们 “链接时,他将被重定向到同一页面的 “联系我们 “部分。

<!DOCTYPE html>
<html>
   <head>
     <style>
     div{
       width :100%;
       height:400px;
       border : 1px solid black;
      }
    </style>
   </head>
  
   <body>
      <h2>Welcome to GeeksforGeeks</h2>
      <p>This is the example of <i>Redirect
 to a particular section using HTML on same page</i>
 </p>
      <a href="#contactUs"> Contact Us </a>
      <br/></br>
      <div>
        <h2>Home section</h2></h>
      </div>
      <div>
        <h2>About Us section</h2>
      </div>
  
      <div id = "contactUs">
        <h2>Contact Us section </h2>
      </div>
      <div>
        <h2>Team Section</h2>
      </div>
   </body>
</html>

输出:
全窗尺寸视图。
如何使用HTML或jQuery重定向到一个页面的特定部分?

当用户点击 “联系我们 “链接时,用户将被重定向到 “联系我们部分”。
全窗尺寸视图。
如何使用HTML或jQuery重定向到一个页面的特定部分?

方法2:使用JQuery

scrollTop()方法设置或返回选定元素的垂直滚动条位置。

注意:当滚动条在顶部时,其位置为0。

语法:

$(selector).scrollTop(position)

使用JQuery重定向到特定部分:

语法:

<a href="#" id="home">home</a>

('#home').click(function(){(document).scrollTop(100) // any value you need
});

例子。当用户点击页面底部的 “联系我们 “链接时,他将被重定向到同一页面的 “主页 “部分。

<!DOCTYPE html>
<html>
   <head>
     <script>
           ("#contactUs").click(function(){
           // any value you need
           (document).scrollTop(600) 
           });
     </script>
  
     <style>
     div{
       width :100%;
       height:400px;
       border : 1px solid black;
      }
    </style>
   </head>
  
   <body>
      <h2>Welcome to GeeksforGeeks</h2>
      <p>This is the example of <i>Redirect 
to a particular section using Jouery
 on same page</i> </p>
      <div>
        <h2>Home section</h2></h>
      </div>
      <div>
        <h2>About Us section</h2>
      </div>
  
      <div>
        <h2>Contact Us section </h2>
      </div>
      <div>
        <h2>Team Section</h2>
      </div>
      <br>
        <a href="#" id="contactUs"> Contact Us </a>
  
   </body>
</html>

输出。联系我们的链接在页面底部。
全窗尺寸视图。
如何使用HTML或jQuery重定向到一个页面的特定部分?

当用户点击 “联系我们 “链接时,用户将被重定向到顶部600 px的 “主页 “部分。
全窗尺寸视图。
如何使用HTML或jQuery重定向到一个页面的特定部分?

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程