anchor scrolling doesn't work properly.

[VincentVanDenBossche]

Hello, I am using slidebars for my onepager website. Its a great framework but I'm struggling with animating a smooth scroll anchor to anchor on my page. The scroll on the website of sliderbars (advanced usage) doesn't work properly so but I understand the principles so I made my own. The problem is it doesn't scroll to the anchor if you have already navigated on the website, like you can see on www.dart-development.be/woodsolutions.

This is how I code my smoothscroll

$('a[href^="#"]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('[canvas="container"]').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
  });

Hope someone can help me!

[Walkeezy]

I'm experiencing the same issue. Anyone found a solution to this?

[JoryHogeveen]

@VincentVanDenBossche
It seems you've got this working now?

@Walkeezy
Can you share a link? There is no general solution in the current version of Slidebars. This is entirely related to your website since every site can have a different structure.
I've modified the Slidebars code in a WordPress plugin to remove the need of scrolling the canvas container and return to the default browser (body) scroll. This might be a better solution for you as well.
See my PR: #257

[Walkeezy]

I'm using the following workaround for now, but I might try your solution @JoryHogeveen, thanks!

$('[canvas="container"]').scrollTop(0); // Resetting scroll position
$('[canvas="container"]').animate({ scrollTop: $target.offset().top - headerheight }, 500);