Плавная прокрутка JQuery для привязки с помощью липкой панели навигации - PullRequest
Новая
       6

Плавная прокрутка JQuery для привязки с помощью липкой панели навигации

0 голосов
/ 14 сентября 2018

У меня есть веб-страница с липким заголовком, который я пытаюсь реализовать плавной прокруткой для привязки тегов для навигации. Когда я нажимаю на навигационную ссылку в разделе, который я хочу перейти scrollTop: href.offset().top - 100 не работает правильно. Если я снова нажму на ссылку после перехода веб-страницы в этот раздел, я смогу увидеть прокрутку страницы, но затем она вернется к началу. Есть идеи, что происходит? Я использую Microsoft Edge (Да, я знаю ...).

HTML 

<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
    <nav><a href="#section1">Section #1</a></nav>
    <main>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
        <h2 id="section1">section1</h2>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
    </main>
</body>
</html>

CSS 

nav {
    position:fixed;
    padding:4px;
border:2px solid #000;
width:100%;
    line-height:2.25em;
    background-color:yellow;
}

h2 {
    padding:4px;
    border:1px solid #000;
    width:100%;
    line-height:100px;
    background-color:red;
    }

JQuery 

$(document).ready(function() {

    $('a[href*="#"]').click(function(event) {

        var href = $(this.hash);

        if (href.length) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: href.offset().top - 100
            }, 750, function() {
                location.hash = href.attr('id');
            });     
        }
    });
});

JSFiddle

EDIT:

Я понимаю, что установка <div> элемента на display:fixed удаляет его из потока страницы, что, как я полагаю, вызывает проблемы. Есть ли способ для этого?

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Как было предложено ранее, Microsoft Edge, похоже, не поддерживает должным образом функцию .hash, не вызывая некоторых негативных последствий, таких как восстановление функции плавной прокрутки. Чтобы обойти это, я решил использовать pushState для браузеров, которые его поддерживали, что дало желаемый эффект.

HTML 

<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
    <nav><a href="#section1">Section #1</a></nav>
    <main>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
        <h2 id="section1">section1</h2>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
    </main>
</body>
</html>

CSS 

nav {
    position: fixed;
    padding: 4px;
    border: 2px solid #000;
    width: 100%;
    line-height: 2.25em;
    background-color: yellow;
}

h2 {
    padding: 4px;
    border: 1px solid #000;
    width: 100%;
    line-height: 100px;
    background-color: red;
}

JAVASCRIPT 

$('a[href*="#"]').click(function(event) {

    var href = $(this.hash);

    if (href.length) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: href.offset().top - 100
        }, 750, function() {
            if (history.pushState) {
                history.pushState(null, null, 'index.html#' + href.attr('id'));
            } else {
                location.hash = href.attr('id');
            }
        });     
    }
});

Мне не удалось понять, как динамически извлекать имя вызывающего файла, например, index.html или main.html, чтобы динамически генерировать хешированный URL-адрес, чтобы его пришлось обновлять на странице. В противном случае, это работает именно так, как я ожидал. Смотрите рабочий пример JSFiddle .

0 голосов
/ 14 сентября 2018

EDIT:

Edge и Firefox не взаимодействовали с первоначальным подходом для изменения поведения hashchange, поэтому это редактирование просто удаляет шаг window.location.hash, чтобы предотвратить скачок после анимации. Однако это не идеальный вариант, поскольку он предотвращает поведение местоположения хэша по умолчанию. 

$(document).ready(function() {
  
  $('a[href*="#"]').on('click', function(event) {
    let hash = this.hash;
    if (hash) {
      event.preventDefault();
      $('html, body').animate({scrollTop: $(hash).offset().top - 100}, 750);
    }
  });
  
});
nav {
  position: fixed;
  padding: 4px;
  border: 2px solid #000;
  width: 100%;
  line-height: 2.25em;
  background-color: yellow;
}

h2 {
  padding: 4px;
  border: 1px solid #000;
  width: 100%;
  line-height: 100px;
  background-color: red;
}
<!DOCTYPE HTML>
<html lang="en">
  <head></head>
  <body id="home">
    <!-- Navigation -->
    <nav><a href="#section1">Section #1</a></nav>
    <!-- Main Content -->
    <main>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <h2 id="section1">section1</h2>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

ОРИГИНАЛ:

Я думаю, location.hash заставляет свиток прыгать наверх после завершения анимации scrollTop. Вы можете изменить событие hashchange, чтобы остановить прокрутку на том же расстоянии над якорями, чтобы исключить скачок. 

$(document).ready(function() {

  $(window).on('hashchange', function() {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  });

  $('a[href*="#"]').on('click', function(event) {
    let hash = this.hash;
    if (hash) {
      event.preventDefault();
      $('html, body').animate({
        scrollTop: $(hash).offset().top - 100
      }, 750, function() {
        window.location.hash = hash;
      });
    }
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...