Почему данный код отлично работает в гугл хром, но отказывается в сафари (и на маке и на айфоне)?

Question

[shobique]

Код помогает плавно опустить экран пользователя к якорю, с необходимым отступом сверху, чтобы зафиксированное наверху меню не заслоняло его.

<script>
	$(document).ready(function(){
    	$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    		e.preventDefault();
    		var target = this.hash,
    		$target = $(target);
    		$calculus = ( $target.offset().top - 75 );
		    $target_to = $calculus.toFixed();
    		$('html, body').stop().animate({
    			'scrollTop': ($target_to+'px')
    		}, 900, 'swing');
    	});
    });
</script>

Answer 1

[sergski]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
        $('a[href^="#"]').on('click',function(e) {
            e.preventDefault();

            var target = this.hash,
                $target = $(target),
                $calculus = ( $target.offset().top - 75 ),
                $target_to = $calculus.toFixed();

            $('html, body').stop().animate({
                'scrollTop': ($target_to+'px')
            }, 900, 'swing');
        });
    });
</script>

работает в сафари под мак

Comments

[shobique]

На маке помогло, на айфоне всё-равно не работает

[sergski]

'swing' не должен быть закавычен, это функция. тут можно вообще удалить

[shobique]

Нашёл лучшее решение, которое работает на всех платформах:

$(document).ready(function(){
    $('a[href^="#"], *[data-href^="#"]').on('click', function(e){
        e.preventDefault();
        var t = 1000;
        var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
        $('html,body').stop().animate({ scrollTop: $(d).offset().top - 80 }, t);
    });
});