如何在html中重定向到页面的特定部分

Question

请帮我修改重定向到页面特定部分的代码。

我完成了重定向到目标网页，但我想要的是重定向到页面的特定<div>。

提前致谢

Answer 1

你可以用两种方式做到这一点。

1）[通过Javascript（+ jQuery）]

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

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

2）[通过纯HTML]

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

<section id="home_section"></section>

Answer 2

这对我来说是最简单的方法

<li><a href="#prices">Prices</a></li> (This could be a paragraph or a button)</li>

<div id="prices">
   // Prices section

</div>

Answer 3

您需要将id属性添加到您要显示的该部分页面，并使用哈希（id）符号在网址末尾传递#名称。例如，您想要使用id='test'

将用户重定向到div

<div id="test">your section content</div>

然后你应该使用这个url结构：

http://example.com/your_page.php?some_param=1#test

Answer 4

<div id="go1">
<!--  content -->
</div>

<div id="go2">
<!-- content -->
</div>

<div id="go3">
<!-- content -->
</div>

...

只需将url id附加到下面，就完成了！

news.html#go1
news.html#go2
news.html#go3

Answer 5

基本上，您在HTML中使用锚标记来完成工作。 你可能熟悉它们：

<a href = " "> </a>

作为HTML约定，在定义节时，您可以为每个节提供标识符的ID：

<section id= "blahblah" ></section>

您可以通过在锚标记中提及它们来重定向到该部分：

<a href = "#blahblah"> </a>

Answer 6

这是两个条件，

1）如果要从其他页面重定向到div：

<a href="page.html#div-panel">Page</a>

if(window.location.href.includes("div-panel"))
{
    $(document).scrollTop(450);
}

2）如果要重定向到同一页面中的div：

<button id="button-click">Panel</button>

$('#button-click').click(function(){
    $(document).scrollTop(450);
});

Answer 7

您可以将html代码与css链接。

在c＃

中

Response.Redirect("http://www.example.com/index.aspx#id_in_css");

Answer 8

为该部分指定一个ID（例如：section1），然后重定向网址为http://www.sample.com/page#section1。

注意：＃和关键字，即您希望浏览器滚动到的部分的ID。

详细了解片段标识符here

Answer 9

如果您真的想要平滑地滑动到设计好的部分，这里有一个快速的分步说明：

1. 在你想要的部分，创建一个 id 属性，即：

   <section id="products">

2. 接下来，使用锚标记，在 href 属性上插入 # + 部分的 ID：

   <a href="#products">

3. 现在，一旦点击，页面就会将锚标记上指向的部分居中。但这会发生。为了平滑滚动过程，请在您的 CSS 文件中使用以下代码段：

html {
  scroll-behavior: smooth;
  }

这是最简单的方法！

还有一些方法可以使用原生 JavaScript 和 JQuery 来实现。更多内容，我推荐文章 CSS Tricks -> https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 10

首先你需要在你想重定向的地方添加id

<section class="com-padd com-padd-redu-top" id="deals-home">

比添加

< a href="{% url 'home' %}#deals-home">Go to Home that page</a>