Bootstrap 5 + Jquery animate scrollTop laggy on Chrome only
See original GitHub issuePrerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Bootstrap 5.1.3 and Jquery 3.6.0 scrollTop animation not start immediately after click on Chrome, but works normlly on other browser(Firefox). Sometimes the animation start after a while (maybe 500 ms) after click, sometimes it start with slow speed then as normal.
Reduced test cases
I tried this minimal code below (Bootstrap 5.1.3) and the problem appears. I also tried several code with other versions of Bootstrap (from 5.0.0 to 5.1.2) and the problem still appears.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
</body>
<script>
$(document).ready(function (){
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
},500);
});
});
</script>
</html>
I tried another code below (older version of Bootstrap 4.6.1), animation works normally.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
</body>
<script>
$(document).ready(function (){
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
},500);
});
});
</script>
</html>
So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and how to fix it.
What operating system(s) are you seeing the problem on?
Windows, Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.1.3
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Animate scrollTop laggy on Chrome only - Stack Overflow
1), animation works normally. So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and...
Read more >[Best solution]-Animate scrollTop laggy on Chrome only
1), animation works normally. So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and...
Read more >.animate() | jQuery API Documentation
A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties....
Read more >Offcanvas · Bootstrap v5.0
Backdrop. Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling ......
Read more >Well-controlled scrolling with CSS Scroll Snap - web.dev
This is intentional as they actually modify the box for all relevant scroll operations and are not just scroll snapping. For example, Chrome...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can also add inline style using jQuery
css()
method:jQuery scroll script has conflict with
scroll-behavior: smooth
in_reboot.scss
line 33. Just override it with css.