Smoothscroll doesn't work in chrome but works in other browsers

Question

I have a button (it is a Font awesome icon), which if you click on it it scrolls to a specific div. In Safari it worked but now I am testing it in Chrome it doesn't work.

The script I am using (jQuery)

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

The button

<a href="#arrow-down-click">
<i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i>
</a>

How to get this working in Chrome (and maybe other browsers I didn't tested yet) too?

EDIT (also in a comment):

I just found out: if I change in css html { overflow: hidden; } to auto and body { overflow: auto; } to hidden, the animation works. But the problem is: I can't scroll from the top down without using the button to go to part 2, and if I am on part 2 I can't scroll anywhere (so not back to the top or to part 3).. Does someone has an idea for that?

EDIT 2 Right now I have this: https://jsfiddle.net/jk1540oc/. It goes to the div I direct to, but it doesn't animate anymore (not in Chrome and not in Safari). You also can't scroll down twice by using the button.

What, exactly, does `it doesn't work` mean? How doesn't it work? What are you expecting vs what happens? etc. — phuzi, Jun 28 '17 at 15:47
@phuzi In safari you see it scrolling down very nice and smooth. In chrome it takes a second or so and you see the div out of no where instead of scrolling smooth — Julian, Jun 28 '17 at 16:34
I just found out: if I change in css html { overflow: hidden; } to auto and body { overflow: auto; } to hidden, the animation works. But the problem is: I can't scroll from the top down without using the button to go to part 2, and if I am on part 2 I can't scroll anywhere (so not back to the top or to part 3).. Does someone has an idea for that? — Julian, Jun 28 '17 at 21:33

score 3 · Answer 1 · edited Sep 10 '20 at 22:27

3

Follow image description with steps numbered here

How to Enable or Disable Smooth Scrolling in Google Chrome in Windows

Open Google Chrome.
Copy and paste the link below into the address bar of Chrome, and press Enter.

chrome://flags/#smooth-scrolling

Select Default, Enabled, or Disabled for the Smooth Scrolling setting you want.

The Default setting has smooth scrolling enabled, but it could automatically disable smooth scrolling when you have too many tabs open.

edited Sep 10 '20 at 22:27

Ademir Mazer Jr - Nuno

890
18
30

answered Sep 10 '20 at 19:22

Baltazar

41
3

1

+1 Your last comment is the real answer here. Never knew Chrome disabled smooth scrolling when too many tabs are open. Smooth scrolling never works for me because I always have so many tabs. – kjw Aug 09 '21 at 20:20
It's just weird that they don't fall back to auto scrolling. Now no scrolling is happening. – Creative Feb 17 '23 at 16:07

Ryan Wheale · Accepted Answer · 2017-06-29T17:37:35.517

2

I recommend keeping html, body { overflow: hidden, height: 100% } and then a wrapper div with { overflow: auto; height: 100% }

<html>
  <body>
    <div id="site-wrapper"> everything in here </div>
  </body>
</html>

This is a pattern I have used for a very long time and it has saved me a lot of headache. Then, do all of your scrolling animations on the div. Here's a working demo:

https://jsfiddle.net/b4uje52o/2/

edited Jun 29 '17 at 17:37

answered Jun 28 '17 at 21:45

Ryan Wheale

26,022
8
76
96

Thank you! It scrolls now: so thank you very much! But there is one problem.. When you are not totally at the top of the page but you can click the button it only brings you down a bit and not to the whole target div and if you click than again it goes back up a bit. JSFiddle: https://jsfiddle.net/1b1pj91q/ – Julian Jun 29 '17 at 14:37
You have to adjust the logic for determining the scroll position. Here's an example with the calculations fixed: https://jsfiddle.net/1b1pj91q/1/ – Ryan Wheale Jun 29 '17 at 17:35

score 0 · Answer 3 · answered Jan 26 '18 at 05:23

I agree the initial question was slightly vague. However, I had a similar issue with Chrome not implementing Smoothscrolling using Javascript. I was able to solve the issue by simply replacing the #link with the full link in the html.

From your question:

<a href="#arrow-down-click"> <i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i> </a>

I changed #arrow-down-click to http://www.yourURLhere.com/#arrow-down-click

Smoothscroll doesn't work in chrome but works in other browsers

3 Answers3