CODEWITHSUNDEEP
htmlhyperlinkanchor
iamnabink
iamnabink

Reputation: 520

Navigation to specific section of the page from another page is not working

I am new to web development and trying to build a simple single page portfolio site using laravel. I have various section like below,

    <li>
        <a href="{{ url('/') }}/#service" class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.4s"><i
                    class="fas fa-briefcase"></i>Services</a>
    </li>

and I also do have target defined in my landing page like below

<div class="service-wrapper" id="service" name="service">..</div>

and also tried with anchor tag

for non laravel developer - {{ url('/') }}/#service gives this url (with targeted anchorId) http://127.0.0.1:8000/#service

these section navigate for same page (i mean working (navigating) fine on landing page) but when i try to go on these section from another page (since i added blog page and want to navigate from here to service section of portfolio-landing page) with http://127.0.0.1:8000/#service this link (which i assume is the way to navigate anchor section from another page) is not navigating to this particular section (it just navigate to that home page like normal hyperlink but not the specified section (#service)). hence how can i go to these specific section from my another page? Am i missing some js? or laravel function?

can anyone help me on this please

Upvotes: 0

Views: 1814

Answers (1)

Anvay
Anvay

Reputation: 363

IMPORTANT

I understand what your problem is. Anchors are only used by page, not by the whole webpage. To do what you are doing, the link should not be page.com/#service, but page.com/page.html#service, so it finds the correct page to go to.

Doing it by page.com/#service only works for the page because page.com/ redirects to page.com/index.html, so really it means page.com/index.html#service.

Instead of using an anchor tag, you can create add an id to your header, like this:

<!-- In page to go to -->
<h1 id="services">Services</h1>

and then link it to the id:

<!-- In page with link -->
<a href="page.html#services">Services</a>

Upvotes: 1

Related Questions