Блог

Главная - Вопросы по программированию - неверный результат плавной прокрутки jquery

неверный результат плавной прокрутки jquery

#javascript #jquery #html #css #bootstrap-4

#javascript #jquery #HTML #css #bootstrap-4

Вопрос:

Я пытаюсь сделать плавную прокрутку

но полоса прокрутки работает не так, как ожидалось, результат кажется плавной прокруткой, и переход по умолчанию к # работает в одно и то же время

вот мой HTML (навигационная система для загрузки)

 <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>

вот мой 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>

и содержимое страницы

 <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>

Когда я нажимаю на ссылку nav в первый раз, это панель навигации прокрутки над заголовком содержимого (чтобы мой заголовок исчез)

введите описание изображения здесь

но когда я снова нажимаю на ту же ссылку, она немного прокручивается вверх и отображается как ожидаемый результат

введите описание изображения здесь

Итак. Кто-нибудь знает, как исправить эту проблему, чтобы прокрутка работала корректно при первом нажатии

Спасибо.

Ответ №1:

Вот ваш код с изменениями, добавьте элемент padding-top:52px; в section и удалите - (navHeight 1) из $(hash).offset().top . 

 $('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;
        });
      }
    });  
 section{
  min-height:500px;
  padding-top:52px;
}
#main-nav{
  position:fixed;
  width:100%;
  top:0px;
  background:#ffffff;
}  
 <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>

Ответ №2:

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

пожалуйста, проверьте, возможно, вы получите некоторую помощь…

 		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)
			});
		}

Ответ №3:

Вы можете использовать этот приведенный ниже код, чтобы упростить scrollspy легко и очень плавно

 <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(/^//, '') amp;amp; 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>