Почему возникает «неровная прокрутка»?

Question

[Александр Степанов]

Почему возникает "неровная прокрутка" к элементам по якорю?
Помогите, пожалуйста решить данную проблему.
Перейти на сайт с проблемой
С уважением.

Comments

[Александр Степанов]

:K Yaha,

$(document).ready(function(){
  
  YaMapsShown = false; 

	$(".form-phone").mask("[phone]");
	$(".fancybox").fancybox({
	    padding: 0
	});
	$('.section-about-slider').slick({
	  infinite: true,
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: false,
	  dots: true,
	});
	$('.section-serts-slider').slick({
	  infinite: true,
	  slidesToShow: 4,
	  slidesToScroll: 4,
	  arrows: true,
	  dots: true,
    responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: true,
        infinite: true,
        dots: true
      },
    },
    {
      breakpoint: 970,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
    	breakpoint: 576,
    	settings: {
    		slidesToShow: 1,
    		slidesToScroll: 1,
    		arrows: false,
    		variableWidth: false
    	}
    }
    ]
	});
	$('.section-reviews-slider').slick({
	  infinite: true,
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  arrows: true,
	  dots: false,
	  variableWidth: true,
    responsive: [
    {
      breakpoint: 970,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        infinite: true,
        variableWidth: false
      },
    },
    ]
	});
	$(".section-tech-tabs-head-item").click(function(){
		var index = $(this).index();
		$(".section-tech-tabs-head-item,.section-tech-tabs-body-item").removeClass("active");
		$(this).addClass("active");
		$(".section-tech-tabs-body-item").eq(index).addClass("active");
	});
	$('.section-works-slider').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: true,
	  fade: true,
	  asNavFor: '.section-works-thumbnail',
	  responsive: [
    {
      breakpoint: 576,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        infinite: true
      },
    }
    ]
	});
	$('.section-works-thumbnail').slick({
	  slidesToShow: 6,
	  slidesToScroll: 1,
	  asNavFor: '.section-works-slider',
	  dots: false,
	  arrows: false,
	  focusOnSelect: true
	});
	$(".section-faq-list-item-question").click(function(){
		var thisfaq = $(this).parent();
		$(".section-faq-list-item").not(thisfaq).removeClass("active");
		$(this).parent().toggleClass("active");
	});

	$(window).scroll(function(){
    var heightscreen = $(window).height();
    //console.log(heightscreen);
    if (heightscreen > 662) 
      var hidetop = 100;
    else
      var hidetop = 30;
    	if ($(document).scrollTop() > hidetop) $(".header").addClass("hide");
    	else $(".header").removeClass("hide");      
  });
 
    $(".nav-link").click(function(e){
      if (!$("body").hasClass("success-body")) {
        e.preventDefault();

        $(".nav .container a.active").removeClass("active");
        $(this).addClass("active");

        //забираем идентификатор блока с атрибута href
        var id  = $(this).attr('href'),

        //узнаем высоту от начала страницы до блока на который ссылается якорь
        top = $(id).offset().top;
        
        //анимируем переход на расстояние - top за 2000 мс
        $('body,html').animate({scrollTop: top}, 500);
        $('.nav').toggleClass('navopen');
        return false; 
      }
    }); 

    $(".openmodal").click(function(e){
      e.preventDefault();
    	var modalname = $(this).attr("href");
    	$(".site").addClass("blur");
    	$(modalname).addClass("open");
    });

    $(".popup-close").click(function(){
		$(".site").removeClass("blur");
		$(this).closest(".popup").removeClass("open");
	});
  
  	$('.popup').mousedown(function(e) {
		var clicked = $(e.target);
		if (clicked.is('.popup-form') || clicked.parents().is('.popup-form') || clicked.is('.modalcontent') || clicked.parents().is('.modalcontent')) {
			return;
    } else {
      	$(".site").removeClass('blur');
      	$('.popup').removeClass('open');
	}
	}); 

  function windowSize(){
    if ($(window).width() <= '576'){
      $('.section-team-list').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrow: false
      });
    }
  }
  $(window).on('load resize',windowSize);

  $('.hamburger').on('click', function(event) {
  	$('.nav').toggleClass('navopen');
  });
  
  $(".form-button").click(function(){
    var form  = $(this).parents("form");
    var phone = form.find(".form-phone").val(),
    firstname = form.find(".form-name").val(),
    utm_source = form.find(".utm_source").val(),
    utm_medium = form.find(".utm_medium").val(),
    utm_campaign = form.find(".utm_campaign").val(),
    utm_content = form.find(".utm_content").val(),
    utm_term = form.find(".utm_term").val(),
    title     = form.attr('data-subject'),
    yagoal    = form.attr('data-yagoal'),
    city      = YMaps.location.city;
    if (phone.length < 1) {
     alert('Вы не заполнили поля формы!');
   } else {
     var data = {firstname: firstname, phone: phone, title: title, city: city, utm_source: utm_source, utm_medium: utm_medium, utm_campaign: utm_campaign, utm_content: utm_content, utm_term: utm_term}
     jQuery.post("mail.php", data, function() {
       form.find("input").val('');
       $(".body").addClass('blur');
       document.location.href = 'success.html';
       setTimeout (function(){ 
        yaCounter48617330.reachGoal(yagoal);
        gtag('event', 'send', {'event_category': 'forms','event_label': yagoal});  
        $(".body").removeClass('blur');       
        location.href = 'success.html';
      }, 3000);
     });        
   }  
   return false;
 });

  $(".form-button-three").click(function(){
    var form  = $(this).parents("form");
    var email = form.find(".form-email").val(),
    firstname = form.find(".form-name").val(),
    title     = form.attr('data-subject'),
    yagoal    = form.attr('data-yagoal'),
    utm_source = form.find(".utm_source").val(),
    utm_medium = form.find(".utm_medium").val(),
    utm_campaign = form.find(".utm_campaign").val(),
    utm_content = form.find(".utm_content").val(),
    utm_term = form.find(".utm_term").val(),
    msg       = form.find(".form-message").val(),
    city      = YMaps.location.city;
    if (email.length < 1) {
     alert('Вы не заполнили поля формы!');
   } else {
     var data = {firstname: firstname, title: title, city: city, email: email, question: msg, utm_source: utm_source, utm_medium: utm_medium, utm_campaign: utm_campaign, utm_content: utm_content, utm_term: utm_term}
     jQuery.post("mail.php", data, function() {
       form.find("input").val('');
       $(".body").addClass('blur');
       document.location.href = 'success.html';
       setTimeout (function(){ 
        yaCounter48617330.reachGoal(yagoal);
        gtag('event', 'send', {'event_category': 'forms','event_label': yagoal});  
        $(".body").removeClass('blur');       
        location.href = 'success.html';
      }, 3000);
     });        
   }  
   return false;
 });

});

[alexalexes]

Вам время анимации нужно вычислять, как расстояние скроллинга разделить на скорость (time = top / speed;).
Константу скорости нужно определить опытным путем.

//забираем идентификатор блока с атрибута href
        var id  = $(this).attr('href'),

        //узнаем высоту от начала страницы до блока на который ссылается якорь
        top = $(id).offset().top;
        
        //анимируем переход на расстояние - top за 2000 мс
        $('body,html').animate({scrollTop: top}, 500);

[Александр Степанов]

alexalexes, Немного не понимаю...

[alexalexes]

Анимация прокрутки происходит всегда за фиксированное время (сейчас 500 мс).
Если top получается 100 пикселей, то промотка будет казаться медленней, а если 1000 пикселей - то быстро.
А нужно сделать так, чтобы время анимации было пропорционально длине "прыжка".

var anim_speed = 300; // пикселей в секунду
var anim_time = (top * 1000) / anim_speed; // 1000 - поправка на милисекунды
//анимируем переход на расстояние 
        $('body,html').animate({scrollTop: top}, anim_time);

PS: Обычная школьная формула по физике: время равно расстоянию деленное на скорость.
PPS: В общем, я вписал ответ.

[Александр Степанов]

alexalexes, Немного не об этом был вопрос. Попробуйте на сайте нажать 2-3 раза на ссылку в меню, страница начнет пролистываться, т.е. скролл не явно к блоку. Почему так происходит?

Answer 1

[alexalexes]

Анимация прокрутки происходит всегда за фиксированное время (сейчас 500 мс).
Если top получается 100 пикселей, то промотка будет казаться медленней, а если 1000 пикселей - то быстро.
А нужно сделать так, чтобы время анимации было пропорционально длине "прыжка".

var anim_speed = 300; // пикселей в секунду
var anim_time = (top * 1000) / anim_speed; // 1000 - поправка на милисекунды
//анимируем переход на расстояние 
$('body,html').animate({scrollTop: top}, anim_time);

PS: Обычная школьная формула по физике: время равно расстоянию деленное на скорость.