1
votes

jquery smooth scroll résultat incorrect

J'essaie de faire un défilement fluide

mais la barre de défilement ne fonctionne pas comme prévu, le résultat semble être un défilement fluide et un saut par défaut pour # travailler en même temps

voici mon HTML (boot strap nav )

<section id="welcome">
    <h3>Welcome</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="about">
    <h3>About</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="services">
    <h3>Services</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>

voici mes js

<script>
    $('body').scrollspy({ 
      target: '#main-nav',
      offset: $('#main-nav').outerHeight()
    });

    // add smooth scrolling
    $('#main-nav a').on('click',(event) => {
      const sender = event.target; // sender 
      // check for a hash value
      if (sender.hash)
      {
        // prevent default behaviour
        event.preventDefault();

        // get sendar hash
        const hash = sender.hash;
        const navHeight = $('#main-nav').outerHeight();

        // animate smooth scroll
        $('html').animate({
          scrollTop: $(hash).offset().top - (navHeight + 1),
        },1500,() => {
          // add hash to URL after scroll
          this.location.hash = hash;
        });
      }
    });
  </script>

et le contenu de la page

<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#welcome">Welcome</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </nav>

Lorsque je clique sur le lien sur nav pour la première fois, c'est la barre de navigation sur l'en-tête du contenu (fait disparaître mon en-tête)

entrez la description de l'image ici a >

mais quand je clique à nouveau sur le même lien, il fait défiler un peu vers le haut et s'affiche comme mon résultat attendu

Alors. Tout le monde sait comment résoudre ce problème pour que le défilement fonctionne correctement la première fois, cliquez sur

Merci.

javascript jquery html css bootstrap-4

0 commentaires

3 Réponses :

0
votes

https://codepen.io/Vikaspatel/pen/jJZOYQ

s'il vous plaît vérifiez que cela pourrait être que vous obteniez de l'aide ...

		function div_slider(){
			$('ul li a').on('click', function(e){
				e.preventDefault();
				$('ul li a').removeClass('active');
				$(this).addClass('active');
				var attrval = $(this.getAttribute('href'));
				$('html,body').stop().animate({
					scrollTop: attrval.offset().top
				}, 1000)
			});
		}

0 commentaires

2
votes

Voici votre code avec modification, ajoutez padding-top: 52px; à l'élément section et supprimez - (navHeight + 1) de $ (hash) .offset (). top .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#welcome">Welcome</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <section id="welcome">
    <h3>Welcome</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="about">
    <h3>About</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="services">
    <h3>Services</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>

section{
  min-height:500px;
  padding-top:52px;
}
#main-nav{
  position:fixed;
  width:100%;
  top:0px;
  background:#ffffff;
}

$('body').scrollspy({ 
      target: '#main-nav',
      offset: $('#main-nav').outerHeight()
    });

    // add smooth scrolling
    $('#main-nav a').on('click',(event) => {
      const sender = event.target; // sender 
      // check for a hash value
      if (sender.hash)
      {
        // prevent default behaviour
        event.preventDefault();

        // get sendar hash
        const hash = sender.hash;
        const navHeight = $('#main-nav').outerHeight();

        // animate smooth scroll
        $('html').animate({
          scrollTop: $(hash).offset().top,
        },1500,() => {
          // add hash to URL after scroll
          this.location.hash = hash;
        });
      }
    });

0 commentaires

0
votes

Vous pouvez utiliser ce code ci-dessous pour faciliter le scrollspy facilement et très facilement

<ul class="navigation clearfix">
    <li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
    <li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
    <li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
    <li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
    <li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
    <li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>


<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($) 
    { "use strict"; 
        $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () 
        { 
            $('a.js-scroll-trigger').removeClass('active') 
            $(this).addClass('active'); 
            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) 
                { 
                    $('html, body').animate({ scrollTop: (target.offset().top - 72) }, 1000, "easeInOutExpo"); 
                    return false; 
                } 
            } 
        }); 
    })(jQuery); 
</script>

0 commentaires