I'm encountering a delay with the scroll.Top() function. This issue is specific to Google Chrome on Desktop.
Here is the jQuery code I am using:
$('html, body').animate({ scrollTop: $('#second').offset().top-140 }, 'slow')
I'm trying to identify what might be causing the problem. I came across this post: jQuery Scroll delays (lags) on chrome but smooth on firefox, but the solution provided doesn't work for me as it involves setting the body and html height to 100% which affects document.scroll identification.
Edit:
Below is a minified version of my code (the issue isn't exactly the same as in the shared link but similar): You can view the effect on this link
try3.html:
<!DOCTYPE html>
<html dir="rtl" lang="he">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap" rel="stylesheet">
<title>נוני ופורטונה</title>
</head>
<body>
<Section id="header">
<div class="scroll-down">
<svg aria-hidden="true" onclick="$('html,body').animate({ scrollTop: $('#second').offset().top-100}, 'slow')" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 52.6" style="enable-background:new 0 0 100 52.6;" xml:space="preserve">
<path class="st0" d="M99.3,1.1c-1-1-2.5-1-3.5,0L49.4,46.7L4.2,0.7c-1-1-2.5-1-3.5,0c-1,1-1,2.5,0,3.5l46.9,47.7
c0.5,0.5,1.1,0.7,1.8,0.7c0.6,0,1.1-0.2,1.6-0.6c0,0,0.1-0.1,0.1-0.1L99.3,4.6C100.2,3.7,100.2,2.1,99.3,1.1z"></path>
</svg>
</div>
</Section>
<div id="second">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam quidem nihil ipsum voluptate pariatur laudantium quod praesentium quasi commodi cupiditate sunt esse tempora, odit iusto, reiciendis assumenda tenetur est mollitia.</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts/script3.js"></script>
</body>
</html>
try3.css:
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
body{
overflow-x: hidden;
margin: 0px;
font-family: 'Alef', sans-serif;
background-color: #f1ead2;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header{
height: 100vh;
background-color: #00AA6C;
position: relative;
}
#second{
position: relative;
margin-top: 10vh;
}
.scroll-down{
color: #fff;
font-size: 400%;
position: absolute;
bottom: 4%;
z-index: 9;
width: 100%;
text-align: center;
}
@keyframes upAnddown{
0% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0);
}
}
.scroll-down svg, #home-gallery .scroll-down svg path {
width: 60px;
height: 32px;
fill: #fff;
display: block;
margin: auto;
}
Thank you!