Geek asks and answers

Simple HTML jump to a section on the same page

The name is a little deceiving. I know how to go to the section on the page using:

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

My question is how can I make the transition location 50 pixels higher by default. This is mainly done when I go to the section, it does not appear exactly at the top of the browser, but allows you to use some buffer room.

+3
source share
4 answers

You can add padding-top: 50px;to your target (s) with a possible unintended side effect, always having 50pxspaces 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

+2
source

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>
+2

CSS,

HTML

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

CSS

.link1 {
  padding-top: 50px;
}
0

, , . .

http://hyperlink#sms_recipient

This link refers to the page and puts focus on the mobile number field. The visitor can immediately enter the number and click send.

0
source

More articles:


All Articles