CODEWITHSUNDEEP
javascripthtmlcss
Yagayente
Yagayente

Reputation: 341

Scroll to a section, with an offset

I'm searching for a way to scroll to a section and add a distance to the scroll (220px), because there is a fixed menu.enter image description here

How could I set a scroll distance from the top of the window ? Here is the code I've made so far:

    $(document).ready(function() {
    $('.menudeux').on('click', function() { // Au clic sur un élément
        var page = $(this).attr('href'); // Page cible
        var speed = 750; // Durée de l'animation (en ms)
        var offset = 220;   
        $('html, body').animate( { scrollTop: $(page).offset().top}, speed ); // Go
        return false;
    });
});


   <nav class="nav-collapse">
    <a class="menuone" href="#theme" data-scroll>Thème</a>
     <a class="menuone" href="#prog" data-scroll >Programmation</a>
     <a class="menuone" href="#intervenants" data-scroll>Intervenants</a>
     <a class="menuone" href="#infos" data-scroll>Infos</a>
  </nav>


  <section id="theme">content</section>
  <section id="prog">content</section>
  <section id="intervenants">content</section>
  <section id="infos">content</section>

Upvotes: 0

Views: 2526

Answers (2)

Pimmol
Pimmol

Reputation: 1871

Looks like you almost have it already.

Try: 

$('html, body').animate( { 
    scrollTop: $(page).offset().top - offset
}, speed );

Upvotes: 1

Aaron
Aaron

Reputation: 10430

you just need to minus the offset.

$(document).ready(function() {
    $('.menudeux').on('click', function() { // Au clic sur un élément
        var page = $(this).attr('href'); // Page cible
        var speed = 750; // Durée de l'animation (en ms)
        var offset = 220;
        $('html, body').animate({
            scrollTop: $(page).offset().top - offset
        }, speed); // Go
        return false;
    });
});

Upvotes: 3

Related Questions