如何使用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>
输出:
全窗尺寸视图。
当用户点击 “联系我们 “链接时,用户将被重定向到 “联系我们部分”。
全窗尺寸视图。
方法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>
输出。联系我们的链接在页面底部。
全窗尺寸视图。
当用户点击 “联系我们 “链接时,用户将被重定向到顶部600 px的 “主页 “部分。
全窗尺寸视图。
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。