开发者

How to implement go-to javascript links? (plus highlight)

开发者 https://www.devze.com 2023-03-29 16:00 出处:网络
Is there a standard way for making all the links in a site, with the form href=#something, become \'go-to\' links? (does this kind of links have a name?)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)

Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you开发者_开发问答 to that page, and then it scrolls down to that link.

Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45

Edit: As you can see, the div gets highlighted. How to make that happen automatically?


You're referring to anchor tags. Here's an example of a JavaScript-less internal link:

<a href="#myDiv">Go to my div!</a>

<div id="myDiv">
    This is content
</div>

If you want to send someone to myDiv using JavaScript, then you could do it this way:

<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>

<div id="myDiv">
    This is content
</div>

Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.

You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:

<a href="http://www.mysite.com/mypage.com/#myDiv">Go to my page and then div!</a>

Or, with JavaScript

<a href="javascript: window.location.href = 'http://www.mysite.com/mypage.com/#myDiv'">Go to my page and then div!</a>


Use the id attribute of the a tag. Place the following at the location you would like to link to:

<a id="example"></a>

You can then link to that using:

<a href="#example">Go to example</a>

If you want to link to a specific anchor on a different page, simply use the # character after the URL:

<a href="somewhere.html#example">Go to different page example</a>

Here's an example.


The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.

If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

0

精彩评论

暂无评论...
验证码 换一张
取 消