0

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;
}); 
});
carl
  • 4,216
  • 9
  • 55
  • 103

2 Answers2

1

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.

vol7ron
  • 40,809
  • 21
  • 119
  • 172
0

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;
});
Community
  • 1
  • 1
Peter Wooley
  • 18
  • 6
  • thanks for looking into this... your fiddle still seems to show the same behavior though? – carl Nov 20 '15 at 06:34
  • In my browser (Firefox 42.0, Windows 10), my Fiddle scrolls down to Section 1 with the content visible when it stops scrolling, where yours passes the context by 50px. Are you seeing something different? Or am I addressing the wrong issue? – Peter Wooley Nov 20 '15 at 06:40
  • Oh! Are you trying to keep the nav bar visible as the user scrolls down the page? Try out this Fiddle and see if it's the behavior you're after: https://jsfiddle.net/5nbdnumh/ – Peter Wooley Nov 20 '15 at 06:44
  • Sorry, I started from yours and intended to ask @carl to vote yours up as it's simpler, but then I didn't see your answer anymore and started from it to solve what I'm hoping is the issue (where the nav bar stays fixed). If it works, I'll be sure to cite you as the source of the `$el.prop('offsetTop')` Fiddle. – Peter Wooley Nov 20 '15 at 06:52
  • No worries, was just curious if we arrived at the same answer. It's not working as it should in Chrome – vol7ron Nov 20 '15 at 06:53
  • both answers doestroy my 50px offset from the top after clicking on the scroll link. The behavior is quite different in FF and Chrome. in FF it at least scrolles down, while in Chrome it only scrolles down by 50px – carl Nov 20 '15 at 07:14
  • It's crazy that it works so well in Firefox and IE, but not Chrome. I tried a different approach, using @vol7ron's `offsetTop` and a new wrapper `
    `. Give this Fiddle a try and see if it works to your liking: https://jsfiddle.net/f1zv1c5k/5/
     – Peter Wooley Nov 20 '15 at 07:17
  • @carl see the changes to my answer. It also looks like Peter found a possibly better solution regarding the scroll issue between browsers. – vol7ron Nov 20 '15 at 07:34