Smooth Scroll to anchor edit page top

Matt Delahoussaye

I am using a smooth scroll snippet. I have a fixed header, and would like the anchor sections to stop under my header. How would I edit this code to get them to stop roughly 100 pixels below the top of the page?

$(document).ready(function(){
  $('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
    var targetOffset = $target.offset(). top;
    $('html,body')
    .animate({scrollTop: targetOffset}, 1000);
   return false;
  }
}
});
});

I just need the sections to stop 100px below the page top. I am very new to jquery so please bare with my lack of knowledge. Thanks

Ahmad Baktash Hayeri

You could simply add 100 to the targets offset from the top of the webpage as such:

    var targetOffset = $target.offset().top + 100;
    $('html,body')
    .animate({scrollTop: targetOffset}, 1000);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Smooth scroll to anchor after loading new page

From Java

How to smooth scroll to page anchor in angular 4 without plugins properly?

From Dev

Smooth scroll to top not working

From Dev

Smooth scroll no anchor only jQuery

From Dev

Scroll Page to Anchor

From Java

Smooth scroll anchor links WITHOUT jQuery

From Dev

Smooth Scrolling to anchor with the ability to interrupt animation with scroll?

From Dev

Highlight active anchor links with smooth scroll

From Dev

Anchor Point Jumps Instead Of Smooth Scroll

From Dev

Smooth scroll to anchor offset pixels, except one specific anchor?

From Dev

JS for smooth scroll to the bottom of the page

From Dev

Smooth scroll for one page site

From Dev

JS for smooth scroll to the bottom of the page

From Dev

Horizontal Smooth Scroll One Page

From Dev

scroll to anchor not working on Wordpress page

From Dev

scroll to anchor not working on Wordpress page

From Dev

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

From Dev

remain at top of page on anchor #link

From Dev

remain at top of page on anchor #link

From Dev

scrollTop: Smooth scroll to ID interferes with back to top

From Dev

Smooth Scroll to Top of Div triggered by Bootstrap Toggle

From Dev

scrollTop: Smooth scroll to ID interferes with back to top

From Dev

Jquery Smooth Scroll Using Offset.top

From Dev

Load page with ajax and scroll to loaded page anchor

From Dev

How to smooth scroll to an anchor if a user hasn't scrolled in 5 seconds?

From Dev

Scroll snap but using anchor tags on the page

From Dev

jquery scroll to anchor different page horizontal images

From Dev

Javascript scroll to next anchor on page with mouse slowly

From Dev

jquery scroll to position on page on anchor click

Related Related

  1. 1

    Smooth scroll to anchor after loading new page

  2. 2

    How to smooth scroll to page anchor in angular 4 without plugins properly?

  3. 3

    Smooth scroll to top not working

  4. 4

    Smooth scroll no anchor only jQuery

  5. 5

    Scroll Page to Anchor

  6. 6

    Smooth scroll anchor links WITHOUT jQuery

  7. 7

    Smooth Scrolling to anchor with the ability to interrupt animation with scroll?

  8. 8

    Highlight active anchor links with smooth scroll

  9. 9

    Anchor Point Jumps Instead Of Smooth Scroll

  10. 10

    Smooth scroll to anchor offset pixels, except one specific anchor?

  11. 11

    JS for smooth scroll to the bottom of the page

  12. 12

    Smooth scroll for one page site

  13. 13

    JS for smooth scroll to the bottom of the page

  14. 14

    Horizontal Smooth Scroll One Page

  15. 15

    scroll to anchor not working on Wordpress page

  16. 16

    scroll to anchor not working on Wordpress page

  17. 17

    Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

  18. 18

    remain at top of page on anchor #link

  19. 19

    remain at top of page on anchor #link

  20. 20

    scrollTop: Smooth scroll to ID interferes with back to top

  21. 21

    Smooth Scroll to Top of Div triggered by Bootstrap Toggle

  22. 22

    scrollTop: Smooth scroll to ID interferes with back to top

  23. 23

    Jquery Smooth Scroll Using Offset.top

  24. 24

    Load page with ajax and scroll to loaded page anchor

  25. 25

    How to smooth scroll to an anchor if a user hasn't scrolled in 5 seconds?

  26. 26

    Scroll snap but using anchor tags on the page

  27. 27

    jquery scroll to anchor different page horizontal images

  28. 28

    Javascript scroll to next anchor on page with mouse slowly

  29. 29

    jquery scroll to position on page on anchor click

HotTag

Archive