Reputation: 361
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
Reputation: 61
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
The Default setting has smooth scrolling enabled, but it could automatically disable smooth scrolling when you have too many tabs open.
Upvotes: 5
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
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