CODEWITHSUNDEEP
javascriptjqueryhtmlcsssmooth-scrolling
Julian
Julian

Reputation: 361

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

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.

Upvotes: 6

Views: 15623

Answers (3)

Baltazar
Baltazar

Reputation: 61

Follow image description with steps numbered here

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

  1. Open Google Chrome.

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

chrome://flags/#smooth-scrolling

  1. 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.

Upvotes: 5

Moomio
Moomio

Reputation: 2081

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

Upvotes: 0

Ryan Wheale
Ryan Wheale

Reputation: 28460

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/

Upvotes: 2

Related Questions