Javascript - scroll to specific anchor tag on another page

Question

I am working on a project where had links to other pages for example

<a href="/services#FB-Lead-Generation">

so when I click on the link from say homepage - it loads the page services, but it doesn't go the anchor #FB-Lead-Generation I believe that it is not doing a full page re-load and hence the anchor tag is not working as when I access the link directly it goes to the anchor tag correctly. how I can achieve this, that is when I click from homepage or other page, it goes to the specific id/anchor position.

Target html

<div id="FB-Lead-Generation" class="capability" data-capability="0">
        <div class="capability__content">
          <h2 data-reveal="up" class="reveal--up revealed">FB Lead Generation</h2>
          <p data-reveal="up" class="reveal--up revealed">With a keen understanding of what's happening in the digital landscape, we leverage the power of google and social media we connect your targeted audiences with your product &amp; services.</p>
          
      </div> </div>

update for javascript:

e.default = function(t) {
        var e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]
          , i = {
            url: window.location.pathname + window.location.search,
            method: "GET",
            data: null,
            headers: {}
        }
          , n = r({}, i, t)
          , s = new XMLHttpRequest;
        return s.onreadystatechange = function() {
            4 === s.readyState && (s.status,
            e(s))
        }
        ,
        s.open(n.method, n.url, !0),
        Object.keys(n.headers).forEach((function(t) {
            s.setRequestHeader(t, n.headers[t])
        }
        )),
        s.send(n.data),
        s
    }

I have added the target html for anchor tag on service page. but not sure, what Js you want me to share. — Dinesh, Oct 06 '21 at 00:30
You might be trying to link to ID which is not yet in DOM, it will load and render in few milliseconds, but it's not there on page load? To inspect this, turn off javascript on your target page and then refresh the page, if you don't see your anchor, it means that link from your page to that anchor won't work. — Miroslav Saracevic, Oct 06 '21 at 00:32
Also, in chrome, if you use console, you can go to little cog icon on top right and enable "preserve log", it will tell you then each time actual navigation is done (easy to identify full page re-load vs just SPA navigation event) — Miroslav Saracevic, Oct 06 '21 at 00:34
yes I checked it and can confirm that there is no full pageload, but it is loading by AJAX. I get this in initiator column - `app.js:28145(xhr)` — Dinesh, Oct 06 '21 at 00:46
to my knowledge then, you can't do this via url to anchor in browser out of the box. this only works on page load and your target anchor needs to be in dom at page load event (it has to be part of document network request). if you are linking to your own page (you have access to both code of both pages), you could write your own delayed javascript to scroll down to anchor once the AJAX is done. — Miroslav Saracevic, Oct 06 '21 at 00:48
yes I have access to both pages including app.js. but not sure I know how I can do it the way you suggest like - delayed javascript after AJAX. it will be great if you can add an answer not exact, but I will get a direction. — Dinesh, Oct 06 '21 at 00:51
your ajax call is probably a promise, you could then maybe do something along of the lines `ajax.then(()=>render()).then(()=>inspectUrlForAnchorAndScrollDownToIt())`? — Miroslav Saracevic, Oct 06 '21 at 08:24
I have updated the relevant java-script function, can you take a look at it, if this makes sense? — Dinesh, Oct 06 '21 at 10:08
do you have source code, this looks like minified code, what are n, s, e and i variables? makes it hard to follow the code — Miroslav Saracevic, Oct 07 '21 at 07:58
but basically after your content is rendered (in your example this is most likely right after `4 === s.readyState && (s.status,e(s))` , can't be sure yet since it's hard to follow), you need to do this: https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div — Miroslav Saracevic, Oct 07 '21 at 08:01
since you need to use `var myElement = document.getElementById('element_within_div');` at one point, your ID can be pulled from URL, which should be a google search away of how to get that url parameter — Miroslav Saracevic, Oct 07 '21 at 08:03

Javascript - scroll to specific anchor tag on another page

0 Answers0