1

Got a question about the Anchor point.

I have a URL like domain.tld/sub/#point1/#point2 and I also using tabs which is triggered by the first #point1. So if someone opens the link the browser is detecting the first tab on that page and then it needs to find the second #point2 which is a anchor point like <div id="point2"></div>.

But now comes te question, since it is not possible to use multiple anchor scrolldowns when the pages is loaded, I have to find a other option. But offcourse didn't have that much experience. Who could help me out?

Regards Martijn

6
  • Just point to the last inner anchor, just use domain.tld/sub/#point2.
    – cнŝdk
    Commented Jun 23, 2017 at 7:41
  • It is not possible since the page is categorized with multiple tabs! Commented Jun 23, 2017 at 7:43
  • How is that? Can you please share your code?
    – cнŝdk
    Commented Jun 23, 2017 at 7:45
  • The code you provided is not enough for a proper answer. You could always get the url text, split it by #, then get the last chunk, make it a new <a> tag, add it to the dom, trigger a click on it and then remove it. A big walk-around but it will work. Or provide sample code for a better solution. Commented Jun 23, 2017 at 7:51
  • 1
    Instead of triggering a click on an <a> element I added a scrolltop approach but keep in mind that if you have a fixed header or something in your page you should calculate it's height and subtract it from your lastItem.offset().top Commented Jun 23, 2017 at 8:08

2 Answers 2

3
$(document).ready(function() {
    goToUrl();
});


function goToUrl() {
    var newUrl      = document.URL;
    var newUrlArr   = newUrl.split("#");
    var newUrlArrLength = newUrlArr.length;
    if (newUrlArrLength>0) {
        var last = parseInt(newUrlArrLength) -1;
        var lastUrl         = newUrlArr[last];
        var lastItem        = $("#"+lastUrl);
        $('html, body').animate({
            scrollTop: lastItem.offset().top
        }, 1000);
    }
}
0

Ok I changed the answer from Stavros a bit like underneath:

$(function() {
    goToUrl();


    function goToUrl() {
    var newUrl      = document.URL;
    var newUrlArr   = newUrl.split("?target=");
    var defUrl = newUrlArr[1].slice(0, newUrlArr[1].indexOf("#"));

    var newUrlArrLength = defUrl.length;
    if (newUrlArrLength>0) {
        var tag = $("#"+defUrl+"");
         $(window).scrollTop(tag.offset().top);
    }
}

});

This does the job for me! Thanks Stavros.

Not the answer you're looking for? Browse other questions tagged or ask your own question.