Why this code works perfectly in Google chrome but refuses to in Safari (on the Mac and on the iPhone)?

Helps to gently lower the user's screen to the anchor with the required top margin that is fixed at the top of the menu does not cover it.
the <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>
June 14th 19 at 20:23
1 answer
June 14th 19 at 20:25
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
the <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>

works in Safari under Mac
On Mac help, on the iPhone it's still not working - Magdalen.Walker commented on June 14th 19 at 20:28
'swing' should not be quoted, it is a feature. then you can delete - Garfiel commented on June 14th 19 at 20:31
Found a better solution that works on all platforms:
$(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);
});
});
- Magdalen.Walker commented on June 14th 19 at 20:34

Find more questions by tags iOSCross-browserismJavaScript