CODEWITHSUNDEEP
htmlcssposition
Windbrand
Windbrand

Reputation: 575

Anchor link screen shift position

Is it possible to change the screen position when clicking an anchor link? By default when clicking an anchor link it shifts screen so that the anchor is at the very top of the screen. I would like it to shift, but I don't want to shift it all the way to top of screen, I want there to be some space from the top, maybe say 50px from the top.

Example:

<a href="#section1">section 1</a>
<a href="#section2">section 2</a>

....
....

<div id="text">
    <div id="section1">text text text</div>
    <div id="section2">text text text</div>
</div>

Thanks.

Upvotes: 4

Views: 4801

Answers (6)

KABA
KABA

Reputation: 352

I implemented that like this.

// scss
.Anchor {
  scroll-margin-top: $anchor-posiiton-buffer + $navbar-height;
}
// for Desktop
@media (min-width: $lg) {
  .Anchor {
    scroll-margin-top: $anchor-posiiton-buffer + $navbar-height-lg;
  }
}

// Focus ring if U need
.Anchor:where(:not(._hideFocus)) + * { transition: .15s ease-in-out }
.Anchor:where(:not(._hideFocus)):focus + * {
  outline: solid .3rem rgba($color-main, .5);
  outline-offset: .3rem;
}

<!-- html -->
<a class="Anchor" id="section-1" href="#section-1" tabindex="-1"></a>
<section>
  ...contents
</section>

Upvotes: 1

edilecachan
edilecachan

Reputation: 1

And if you need all the anchor to be lower in page :

a[id] {
     padding-top: 170px;
     margin-top: -170px;
}

Have fun !

Upvotes: 0

user10425889
user10425889

Reputation:

Another option is this: 

<style>
div.shifted {padding-top: 70px; margin-top: -70px;}
</style>

<div class="shifted" id="section1">text</div>

This also works if you have something like an absolutely positioned menu at the top of your pages which messes up anchor positions. If the menu is 70px high, the above code will have the anchor display the div right below the menu.

Upvotes: 0

Akom
Akom

Reputation: 1631

Pure CSS option without adding any extra elements:

a.shifted-anchor {
  display: block;
  position: relative;
  top: -100px;
}

<a name="something" class="shifted-anchor"></a>

Upvotes: 3

Metauser
Metauser

Reputation: 85

JavaScript is not required. This will do what you want I suspect.

This solution allows you to place the anchors where you want to have the screen scroll to a position offset from the anchor specified in the CSS rule for the class adjusted-anchor.

<style>

  .anchor-container {
     position:relative;
  }

  .adjusted-anchor {
     position:absolute;
     top: -150px;
  }

</style>

<a href="#anchor">CONTINUED BELOW</a>

...


<div class="anchor-container"><div name="anchor" class="adjusted-anchor"></div></div>
<div>...continued from above</div>

The offset is fixed so if your content re-flows when the screen is resized you would have to work with percentages or JavaScript to respond to the browser resizing.

Upvotes: 4

vincelee888
vincelee888

Reputation: 23

there won't be a way to do it with pure html - you'll get different results in different browsers.

have a look into javascript's window.scrollTo()

Upvotes: 0

Related Questions