CODEWITHSUNDEEP
htmlhyperlinkanchor
user3293257
user3293257

Reputation: 41

How to scroll to a position above a target section using in-page HTML links

I know how to jump to a section on a page using:

<a href="#link">Link</a>`
<a name="Link">

My question is: how can I make the jump location be 50px up from the default?

Basically make it so when I jump to the section, it doesn't appear exactly at the top of the browser, but allows for some buffer room.

Upvotes: 4

Views: 20251

Answers (6)

RaygunGoth
RaygunGoth

Reputation: 1

Further to bones225's answer earlier: I also found an invisible div element works best. However, if you're likely to use this multiple times across your site I would recommend setting the div up as a class instead:

.anchor {
    position: relative;
    top: -50px; /* adjust this to suit */
}

... and then in HTML:

<!-- Your link to this item -->
<a href = "#example">Example</a>

<!-- The actual content -->
<div class = "anchor" id = "example"></div>
<h2>Example</h2>

Upvotes: 0

bones225
bones225

Reputation: 1728

I have found this solution to be the most effective as it allows for you to add some padding above your target section, without adding spacing between your elements.

Add an invisible <div> above your element, then move it upwards by adjusting the relative position. 

<style>
#section{
    position: relative;
    left: 0px; 
    top: -90px; /* Adjust this */
}
</style>

<div id="#section"></div> 
<div>content</div>

Upvotes: 1

MadSheffieldCouncilWorker
MadSheffieldCouncilWorker

Reputation: 1

You can make a hyperlink that puts the cursor in a form field on the page by adding the relevant name of the field. Just add the sharp character before it.

http://hyperlink#sms_recipient

This link goes to the page and puts the focus on the mobile phone number field. The visitor can immediately type the number and hit send.

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21728

You could add padding-top: 50px; to your target(s), with a possible unintended side-effect of always having 50px of space above your target(s).

Example:

HTML:

<a href="#test">Test</a>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

<h1 id="test">Target</h1>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

CSS:

#test { padding-top: 50px; }

DEMO

Upvotes: 4

RanSch
RanSch

Reputation: 469

For clean code that solves your problem, use CSS "before":

<style>
#link:before{
padding-top:50px;display:block;content:"";
}
</style>

<a href="#link">Link</a>
<div id="link">content</div>

Upvotes: 3

Sachin Jain
Sachin Jain

Reputation: 21842

How about using some CSS like this

HTML

<a name="Link" class="link1">

CSS

.link1 {
  padding-top: 50px;
}

Upvotes: 0

Related Questions