Как быть с плавным перелистывание скролла при нажатии на ссылку?

Question

[Bloggo123]

Здравствуйте! Поставил на сайт скриптик из интернета, для плавного перелистывания к нужному месту в лендинге, вот такой код:

$('a[href*="#"]:not([href="#"])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && 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
				}, 1000);
				return false;
			}
		}
	});

Но у меня есть еще magnific-popup, который так же нуждается в ссылке на идентификатор, и теперь, когда человек нажимается на попап-кнопку - браузер начинает плавно подъезжать к этому месту, как это можно обойти, может быть какие-то исключения прописать, чтобы скрипт перелистывания их как бы обходил стороной?

<a href="#cback" class="call-back button-call-back popup-with-move-anim">Заказать обратный звонок</a>

<menu>
						<ul class="menu">
							<li><a href="#company">О нас</a></li>
							<li><a href="#production">Продукция</a></li>
							<li><a href="#services">Услуги</a></li>
							<li><a href="#question_answer">Вопрос-ответ</a></li>
							<li><a href="#contacts">Контакты</a></li>
							<li><a href="#ord-costing" class="popup-with-move-anim">Заказать расчет стоимости</a></li>
						</ul>
					</menu>

Заранее благодарю.

Answer 1

[Сергей Горячев]

$('a[href*="#"]:not([href="#"])').not('.popup-with-move-anim').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && 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
        }, 1000);
        return false;
      }
    }
  });
  $('a[href*="#ord-costing"]').click(function(e){
  	e.preventDefault();
  });

https://jsfiddle.net/Ln38fdno/
А вообще, проще открытие попапа повесить на другой блок, например, на span или p.
Не использовать a для этого намного проще.

Comments

[Bloggo123]

Здравсвтуйте, почему-то именно с этим not именно с данным классом не работает, а вот поставив туда button-call-back - применилось. А вот с другими уже не работает, например, задал класс button-ord-costing, и в not прописав его - опять тоже что и прежде.

[Сергей Горячев]

Bloggo123: На фидле всё работает. Выкладывайте код свой, посмотрю.

[Сергей Горячев]

Bloggo123: кроме .not, нужно добавить в e.preventDefaul. .not - не дает скролиться, а preventDefualt не вообще отменяет действия.

[Bloggo123]

Bloggo123: недоглядел, спасибо!

[Bloggo123]

Sergey Goryachev: подскажите пожалуйста, как теперь можно сделать, чтобы при прокрутке до какого-то определенного блока можно было фиксировать меню вверху, при этом логотип чтобы удалялся? И желательно чтобы это не был клон, потому-что я использовал клон блока при помощи headhesive и там не работали якорные ссылки(точнее плавный скролл, были просто прыжки). Благодарю заранее)

[Сергей Горячев]

Bloggo123: При загрузке страницы меню дать класс loading, а при скролле менять на scrolling. Пример реализован тут у меня euroserviceltd.ru , скрипты слиты в один правда. Вот код

$(window).scroll(function() {
        if ($('body').width() > 800) {
            if ($(this).scrollTop() >= 123 && $('menu').hasClass("loading")) {
                $('menu').removeClass("loading").addClass("scrolling");
            } else if ($(this).scrollTop() < 123 && $('menu').hasClass("scrolling")) {
                $('menu').removeClass("scrolling").addClass("loading");
            }
        }
    });

123 это высота, на которой меняется класс.
loading - position relative, а scrolling - position fixed.

menu {
    &.loading {
        width: 100%;
        position: relative;
    }
    &.scrolling {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
    }
}

[Сергей Горячев]

Bloggo123: сервер тупит сильно, тут клон сайта euroservice.aydigital.webirus.ru

[Bloggo123]

Sergey Goryachev: спасибо, механику понял, сейчас буду пробовать. А можно еще один вопрос?

[Сергей Горячев]

Bloggo123: ну давай, раз уж начал)

[Bloggo123]

Sergey Goryachev: Где найти подобный слайдер?, возможно есть какой-то подобный слайдер на примете?
Как я могу вам помочь?

[Bloggo123]

Sergey Goryachev:

var heightblock = $('.header').height();
	$(window).scroll(function() {
      if ($(this).scrollTop() >= heightblock && $('.head-line').hasClass("loading")) {
          $('menu').removeClass("loading").addClass("scrolling");
      } else if ($(this).scrollTop() < heightblock && $('.head-line').hasClass("scrolling")) {
          $('menu').removeClass("scrolling").addClass("loading");
      }
    });

[Bloggo123]

Sergey Goryachev: получилось, спасибо большое))

[Сергей Горячев]

По слайдеру не знаю, объяснение очень туманное. Попробуйте поискать в сторону jquery accordion gorizontal в поисковиках.

[Bloggo123]

Sergey Goryachev: да я тоже если честно не понимаю зачем клиенту такой замудренный слайдер, и как активный слайд будет уходить назад я не понимаю, ну в общем-то при нажатии на кнопку его фон становиться основным. Давайте я репостну какой-нибудь ваш проект за то, что Вы мне помогли))

[Сергей Горячев]

Bloggo123: нечего у меня репостить) всё норм)

Answer 2

[Артём Цымбалюк]

//Плавная прокрутка к якорю
	$("body").on('click', '[href*="#"]', function(e){
	  var fixed_offset = 100;
	  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
	  e.preventDefault();
	});