jQuery défilement lisse d'ancrage de navigation

J'ai une liste en fonction de navigation en haut de mon site, c'est un site d'une page de sorte que le hrefs sont des ancres des articles sur la page. J'ai utilisé ce code: jQuery lisse de défilement de positionnement ne fonctionne pas

De Navigation:

<nav>
   <ul class="navigation">
      <li class="navigation"><a class="scroll" href="#about-me">about me</a>
      </li>
      <li class="navigation"><a class="scroll" href="#my-skills" >my skills</a>
      </li>
      <li class="navigation"><a class="scroll" href="#portfolio">portfolio</a>
      </li>
      <li class="navigation"><a class="scroll" href="#contact">contact</a>
      </li>    
   </ul>
</nav>

Section/div:

<section id="contact"> <!---->
    <div class="panel" id="contact">
        <h2>Contact</h2>
    </div>
</section> <!---->

Javascript utilisé:

<script type="text/javascript">
$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop':  parseInt($target.offset().top,10);
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
</script>

L'ancre fonctionne et qu'il passe à la section, mais avec pas de défilement?

Envisager d'utiliser fullpage.js pour elle.
Il ne devrait pas être un ; après 'scrollTop': parseInt($target.offset().top,10)

OriginalL'auteur user3574766 | 2015-08-05

  1. 7

    Il y a quelques problèmes dans votre code:

    • Vous n'avez pas fermé votre lis correctement
    • Vous avez même ids pour section et div qui n'est pas valide
    <section id="contact"> <!---->
    <div class="panel" id="contact">

    Afin de corriger les erreurs ci-dessus, je voudrais ajouter un plus de changement dans votre JS qui est:

    • Pas besoin d'ajouter parseInt à scrollTop. Vous pouvez aller directement à la offset().top

    DÉMO

    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop':  $target.offset().top //no need of parseInt here
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
    Qui fonctionne parfaitement, merci pour le trop d'erreurs!
    À tout moment.. amusez-vous bien.. 🙂
    il a parfaitement fonctionné, thks
    À tout moment.. amusez-vous bien.. 🙂

    OriginalL'auteur Guruprasad Rao

  2. 2

    Essayez ce code:

     <script type="text/javascript">
    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);
        var scroll;

        if($(window).scrollTop()==0){
            scroll =  ($target.offset().top) - 160
        }else{
            scroll =  ($target.offset().top) - 60
        }
        $('html, body').stop().animate({
            'scrollTop': scroll
        }, 900, 'swing', function () {
            //window.location.hash = target;
        });
    });
});
</script>
    Qui fonctionne parfaitement! cependant mon nav est fixé à hauteur de:10vh; assurez-vous que le nav ne marche pas aller sur le h2 titre, je lui ai donné padding-top:10vh; lors du défilement en arrière jusqu'à, il défile à ce que la valeur liquidative est en haut de la div sens-je obtenir indésirables 10vh écart, comment puis-je le résoudre?

    OriginalL'auteur