Html 如何链接到另一个页面上的 <div>?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20565644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:28:16  来源:igfitidea点击:

How to link to a <div> on another page?

html

提问by online Thomas

I'd like that a specific link goes to a certain header on another page. I know how to do it on the current page.

我希望特定链接指向另一个页面上的某个标题。我知道如何在当前页面上执行此操作。

回答by kfb

Take a look at anchor tags. You can create an anchor with

看看锚标签。您可以创建一个锚点

<div id="anchor-name">Heading Text</div>

and refer to it later with

稍后参考它

<a href="http://server/page.html#anchor-name">Link text</a>

回答by Jukka K. Korpela

You simply combine the ideas of a link to another page, as with href=foo.html, and a link to an element on the same page, as with href=#bar, so that the fragment like #baris written immediately after the URL that refers to another page:

您只需将指向另一个页面的链接(如href=foo.html)和指向同一页面上元素的链接(如 )结合起来href=#bar,这样片段 like#bar会立即写在引用另一个页面的 URL 之后:

<a href="foo.html#bar">Some nice link text</a>

The target is specified the same was as when linking inside one page, e.g.

目标的指定与在一页内链接时相同,例如

<div id="bar">
<h2>Some heading</h2>
Some content
</div>

or (if you really want to link specifically to a heading only)

或者(如果您真的只想专门链接到标题)

<h2 id="bar">Some heading</h2>

回答by praveen

You can add hash infoin next page url to move browser at specific position(any html element), after page is loaded.

加载页面后,您可以在下一页 url 中添加哈希信息以将浏览器移动到特定位置(任何 html 元素)。

This is can done in this way:

这可以通过以下方式完成:

add hash in the url of next_page : example.com#hashkey

在 next_page 的 url 中添加哈希:example.com# hashkey

$( document ).ready(function() {

  ##get hash code at next page
  var hashcode = window.location.hash;

  ## move page to any specific position of next page(let that is div with id "hashcode")
  $('html,body').animate({scrollTop: $('div#'+hascode).offset().top},'slow');

});

回答by nestedloop

Create an anchor:

创建锚点:

<a name="anchor" id="anchor"></a> 

then link to it:

然后链接到它:

<a href="http://server/page.html#anchor">Link text</a>