Isengo Isengo - 5 months ago 13
jQuery Question

Using Pagescroll with / before ID

I am using pagescroll (Bootstrap) and it works fine when I use #scroll or #test as a link. But when I am using

<a href="/#experiences" class="page-scroll">Experiences</a>


It won´t. I guess it is because of the / , but I need it, so the menu goes back instead of just adding a #experiences to annother link like

www.test.de/othersite#experiences


That is my jQuery. Is this fixable in jQ?

$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});

Answer

You can use .replace() to turn "/#experiences" to "#experiences".

Example with your code:

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($anchor.attr('href').replace("/", "")).offset().top - 50)
    }, 1250, 'easeInOutExpo');
    event.preventDefault();
});

Note:

If what you are trying to do is have a url like this: www.test.de/othersite/#experiences Then this will not work because \ is used to reference a path for the file in the HTTP request and so that will not be possible.

Comments