jQuery плавная прокрутка и ссылка на другую страницу - PullRequest
Новая
       26

jQuery плавная прокрутка и ссылка на другую страницу

0 голосов
/ 29 июня 2018

Это моя структура меню:

HTML 

<nav>
  <ul>
    <li><a href="#highlights">Highlights</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<div id="highlights">
  //some content inside for the highlights
</div>

JQuery 

  $('a[href="#highlights"]').click(function() {
    $('html, body').animate({
        scrollTop: $("#highlights").offset().top
    }, 1000);
  });

Таким образом, я могу добиться плавной прокрутки к определенной части страницы (в данном случае Основные).

Работает нормально, но когда я вхожу, скажем, контактную страницу: 

www.mywebsite.com/contact

и когда я нажимаю на выделение, он не возвращается на домашнюю страницу, а просто добавляет параметр в URL: 

www.mywebsite.com/contact#highlights

Конечно, потому что основные моменты на главной странице. Если я сделаю ссылку на основные моменты, как это: 

<a href="/#highlights">Highlights</a>

он перейдет на домашнюю страницу и определенную часть Основные моменты, но если я снова нажму на ссылку меню Основные моменты, это нарушит плавную прокрутку.

Есть ли какое-то решение для этого?

Я пытался изменить свой код jQuery следующим образом: 

  $('a[href="/#highlights"]').click(function() {
    $('html, body').animate({
        scrollTop: $("/#highlights").offset().top
    }, 1000);
  });

но это тоже не сработало.

EDIT. Я использую Laravel 5.5.

EDIT2: Gezzasa опубликовал блестящую идею, и я немного подправил.

Для правильной работы на домашней странице должен быть дополнительный класс, поэтому следующий код jQuery будет работать так, как должен. Допустим, я добавляю класс «front» на своей домашней странице и использую идею Gezzasa, это работает правильно:

HTML 

<nav>
  <ul>
    <li><a href="/#highlights" data-anchor="#highlights">Highlights</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<div id="highlights">
  //some content inside for the highlights
</div>

JQuery 

  $('.front [data-anchor]').click(function(e) {
    e.preventDefault();
    var goToAnchor = $(this).attr("data-anchor");
    $('html, body').animate({
      scrollTop: $(goToAnchor).offset().top
    }, 1000);
  });

1 Ответ

0 голосов
/ 29 июня 2018

Я исправил это, изменив пару вещей.

Я добавил параметр данных в тег с именем data-anchor. Вы можете называть это как хотите.

Затем я разместил там идентификатор, чтобы полностью игнорировать href и предотвратить поведение по умолчанию для тега a. <a href="#" data-anchor="#highlights">SmoothScroll</a>

Затем я использовал слушателя, чтобы добавить событие click к элементу после загрузки dom.

https://jsfiddle.net/qf0duLb1/17/

Теперь он будет плавно прокручиваться, если якорь находится на странице.

Надеюсь, я действительно ответил на ваш вопрос, или я мог неправильно его понять. Там, вероятно, есть гораздо лучшие решения. Это сработало для меня.

...