плавная прокрутка для всех ссылок и кнопок на странице - PullRequest
0 голосов
/ 02 ноября 2018

Первые 26 строк дают мне плавную прокрутку для всех ссылок в моей панели навигации и моего логотипа, но я не знаю, как совместить его с кнопкой прокрутки вверх, которую я получил из другого урока. Есть ли способ заставить все ссылки прокручиваться в первом куске кода, а не только элементы в панели навигации?

$(document).ready(function(){
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".navbar", offset: 50});   

  // Add smooth scrolling on all links inside the navbar
  $("a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
});

jQuery(window).scroll(function(){
  if (jQuery(this).scrollTop() > 300) {
    jQuery('.scrollToTop').fadeIn();
  } else {
    jQuery('.scrollToTop').fadeOut();
  }
});

//Click event to scroll to top

jQuery('.scrollToTop').click(function(){
  jQuery('html, body').animate({scrollTop : 0},800);
  return false;
});

1 Ответ

0 голосов
/ 02 ноября 2018

Вам необходимо отделить событие клика для ссылки панели навигации и вашей ссылки scrollToTop , а также зарегистрировать ссылку scrollToTop для события клика. Таким образом, ваш код будет выглядеть следующим образом (при условии, что вы добавите класс nav-link к ссылкам на панели навигации):

$(document).ready(function(){
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".navbar", offset: 50});   

  $('.scrollToTop').on('click',function(event){
      event.preventDefault();
    $('html, body').animate({scrollTop : 0}, 800);

  });

  // Add smooth scrolling on all links inside the navbar
  $(".nav-link").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
});

jQuery(window).scroll(function(){
      if (jQuery(this).scrollTop() > 300) {
        jQuery('.scrollToTop').fadeIn();
      } else {
        jQuery('.scrollToTop').fadeOut();
      }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...