Weird Anchor Tag issue

Not sure what is wrong. My URL: http://islamoradabeachhouse.com/
Here is what's happening:
- I have 3 images on the home page that I want to link to their respective galleries
- So on the gallery page, since name anchor tag is deprecated (which I tried doing as well), I added empty div with id tags for anchors <div id="beach"></div> , <div id="pool"></div>, <div id="house"></div>
- Linking to the id from the home page: <a href="/gallery/#beach">, etc. (I also tried full url)
- When it lands on the gallery page, it always lands on the same place. same distance from the top - Not the anchor.
- So it doesnt work properly. Here is where it gets weird. When you're on the gallery page and in the url, you change the anchor to something else, it works.
Ex: if you're on http://islamoradabeachhouse.com/gallery/#pool and change #pool to #house it works perfectly!

I've been trying to figure this out for hours and getting really frustrated :slight_frown: Not sure what else to try.

  • gediweb
    • Site Builder, Child of Zeus

    Hi Mike Wiesman

    Thanks for looking into this.

    I just changed the "view gallery" text links under the 3 images on the home page to not have the / but when it lands on the gallery page, same thing happens and the url changes to have the / in it.

    Not sure what you mean by body ID. The galleries are all on the same page. I need the link to jump to the proper section.

  • Sajid
    • DEV MAN’s Sidekick

    Hi gediweb,
    Hope you are doing good today :slight_smile:

    Its working fine for me either with or without the forward slash before the ID of the container.

    Where you want to add the links on page ? I don't see the links to jump to proper sections.

    Please add a menu with those links and feel free to post a reply here if you still need help.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • gediweb
    • Site Builder, Child of Zeus

    It's not lazy load. I disabled and it didnt make a difference.

    sajid, To make it simpler, I created a test page (http://islamoradabeachhouse.com/test/) and added a navigation in the content that should be taking you to gallery and jumping to the proper anchors.

    Here is a screenshot to where the links should be taking you to: https://snag.gy/IhKfeN.jpg
    1. Beach 2. Pool 3. House

    For some reason, it's not working on any of the browsers.

  • Panos
    • SLS

    Hi gediweb ,

    I believe this is happening because it takes some while to load images, as I noticed that if you revisit (click on address bar and press enter) page it should be working.

    I would suggest a js workaround on this, something like:

    <script type="text/javascript">
    jQuery(document).ready(function(){
    	if(window.location.hash) {
    
    	  var hash = window.location.hash.substring(1);
    	  jQuery(document).scrollTop( jQuery("#" + hash).offset().top );
    
    	} 
    
    });
    </script>

    Haven't tested it, but what the above script should do is to wait until the page has loaded and then should scroll to the element with the id in the hash.

    Hope this helps :slight_smile:

    Kind regards,
    Panos

  • gediweb
    • Site Builder, Child of Zeus

    Thank you panos,
    I tested the script in the gallery page head and that didnt work. Then I removed it from the head and added it inline in the body (before the pictures) and that unfortunately didnt work either. That's where I left it if you want to take a look.

    Actually I dont think it works anymore when you reload the page.

  • Panos
    • SLS

    Hi gediweb ,

    The ideal solution would be to be able to hook at the callback of the function that loads the images, but I am not aware which script is bing used by VC.

    I have altered the code a bit adding some additional time before the scroll to execute, so the page loads all images (or most images - depending on load time).

    Here is the code I have inserted :

    <script type="text/javascript">
    
    jQuery(window).load(function(){
    
    	if(window.location.hash) {
    
    		setTimeout(function () {
    			var hash = window.location.hash.substring(1);
                jQuery(document).scrollTop( jQuery("#" + hash).offset().top );
    		}, 1000);
    
    	} 
    
    });
    
    </script>

    I am afraid there is nothing much left to do here. Lazy loads don't work so nice with anchors, only by using the lazy load's script callback function.

    Cheers!
    Panos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.