Smooth Scroll JQuery doesn't work smoothly in Chrome? - javascript

I am using this JQuery script for a vertical smooth scrolling effect. It works perfectly in Internet Explorer and Firefox but it's not smooth at all in Google Chrome's latest version??? How come? Should I change something in the script or is there another smooth scroll script that works nice and smooth across all browsers?
In Google Chrome, the smooth scroll effect actually jiggles and stops for a brief moment so that it all looks kinda ugly.
Here is the JavaScript/JQuery code:
(function() {
$('header ul a').bind('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
My HTML has 5 <section>'s and each section has it's own ID (Home, About, Services, Gallery and Contact) so there is nothing spectacular here. Thanks for help!

Related

How to hide a div while keeping the other divs below the same position

I have a smooth scroll down animation like this. Here is my animation.
My problem is that the animation works fine on Chrome, but on Safari and Firefox, the animation makes the user scroll to the bottom of the page not the begin of it.
My code for creating the animation:
$(document).on('click', 'a[href^="#index"]', function (event) {
event.preventDefault();
// This function makes the scroll animation to the div with the id="index"
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 100
}, 1200);
//Once the user clicks on the button and scrolls to the div. The two divs above the index div are hidden after 1300 millsecs.
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
$('#home').css('margin-top', '0');
});
Why does code below works fine on Chrome, but on Firefox/Safari doesn't work as similar as Chrome?
$('.introsection').delay(1300).hide(0);$('#swipe-down').delay(1300).hide(0);

smooth scroll does not work with overflow-y

I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});

Anyway to animate smoothly on mobile device with jQuery?

Upon loading a reasonably long page, I need to smoothly scroll down to a certain on the page, so that the user doesn't have to.
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#today').offset().top
}, 'slow');
});
...
<div id="today">foo</div>
This works well in a desktop browser, but on the iPhone and especially on the Android, it is pretty jerky.
Questions:
Am I going about it the right way? Is there a better way?
Is there a way to specify a specific interval in milliseconds, instead of 'slow'?
jQuery .animate() easing options appear set to swing by default , try setting to linear , e.g.,
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#today').offset().top
}, 2000, "linear");
});
#today {
position : absolute;
top : 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="today">today</div>

Efficient way of scrolling to part of page with jQuery links

I've asked for help in regards to a scroll identifier and now have this code working perfectly:
http://codepen.io/vsync/pen/Kgcoa
However, I was wondering how I can get it so when I click the links on the black scrollbar I can get it to scroll to that part of the page. I think it would be something along these lines:
$(".a1").click(function() {
$('html, body').animate({
scrollTop: $("#a1").offset().top
}, 2000);
});
The scroll identification bit of the JavaScript has been so refined that I was really hoping there would be an elegant and optimised way to make it so they can skip to bits of the page too.
Try this.
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: $('#'+sectionId).offset().top
}, 2000);
});
Fiddle Demo

How to use scrollTop in jquery when linking to a new page

I have the following code to smoothly scroll between links on a single page:
$(".navbar .nav a").bind('click',function(event){
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - (90) + "px"
}, {
duration: 1200,
easing: "easeInOutExpo"
});
return false;
event.preventDefault();
});
This works fine when the links are clicked on the same page. However, when they are linked to exernally:
The offset doesn't apply; and
The page doesn't scroll.
I would like to fix this by navigating to the new page, starting at the top and then scrolling down to the anchor. How can I achieve this?

Categories

Resources