$(document).ready(function(){
  // Add smooth scrolling to all links
  $("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
      }, 1000, function(){

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

Я запускаю это, чтобы сгладить прокрутку до "#top", не меняя хэш URL. Я случайно обнаружил способ изменить это так, чтобы URL не обновлялся (добавлено «none» для «window.location.hash»), но есть одна проблема; Теперь функция не будет повторяться.

Вот что происходит:

  • Загрузить страницу
  • Прокрутить вниз
  • Нажмите верхний якорь
  • Прокрутка страницы вверх (без обновления URL)
  • Прокрутите вниз снова
  • Нажмите верхний якорь
  • Ничего не произошло

Не знаю, откуда у меня этот фрагмент, но я какое-то время держал его в своей js-папке.

0
QAW 27 Май 2017 в 20:28

2 ответа

Лучший ответ

Вы смешиваете два способа прокрутки страницы.

hash - это #something в URL-адресе ... Полезно для прокрутки до якоря при загрузке страницы.

Эффект #hello можно увидеть по этой ссылке: https: // codepen. И.О. / Bes7weB / ручка / ybWNbJ ? редакторы = 1111 # привет

Затем, чтобы пользователь мог прокрутить до верхней части страницы, я бы использовал id верхнего якоря в href ссылки, которая вызывает функцию прокрутки.
Это вызовет функцию по этой конкретной ссылке вместо ВСЕХ ссылок на странице. ; )

И, наконец, эта строка: window.location.hash = none; пытается изменить исходное значение хеш-значения загрузки на none, который интерпретируется как неопределенная переменная, поскольку ожидается строка.

ReferenceError: ни один не определен

Я бы просто удалил эту строку ...
или если вы действительно хотите очистить хеш-значение:

window.location.hash = "";


Работающая функция прокрутки вверху: См. CodePen для изменения разметки HTML)

 $(document).ready(function(){
  // Add smooth scrolling to all links
  $("a#backTOtop").on('click', function(event) {
    console.log($(this).attr("href"));

    // Make sure this.hash has a value before overriding default behavior
    if ($(this).href !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var top = $(this).attr("href");

      // 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: $(top).offset().top
      }, 1000, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        // window.location.hash = none;
      });
    } // End if
  });
});
2
Louys Patrice Bessette 27 Май 2017 в 18:53

Если вам не нужно влиять на хеш URL, просто удалите (или прокомментируйте //) эту строку кода; потому что это генерирует ошибку в JavaScript.

Если вы хотите удалить хеш из URL, попробуйте этот код:

history.pushState('', document.title, window.location.pathname + window.location.search);
0
CoursesWeb 27 Май 2017 в 18:10