Home/ Questions/Q 483563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T01:12:37+00:00

I have an anchor link which links to another page. When it is clicked,

  • 0

I have an anchor link which links to another page. When it is clicked, by default it goes to the top of the next page. I want it brought to a certain position of the page. How do I do this (either with a jQuery slide effect or normal html)?

For instance, when .sample a is clicked I want it to bring you to a certain position of the linking page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, so this answer is very specific to your problem.

    The reason none of the other solutions worked is that your div elements that would match the anchor are hidden when the page loads.

    To prove this out, click on of your links on the home page, and see it not work. Then change the hash from #whatever to #bgaboutbody and you will see it work properly.

    So, using something like this will make it work for you. Basically, if there is a hash, it will animate down to the correct spot. Put this in a script block at the very bottom of your page (right above the </body> tag)

    window.setTimeout(function(){
    if(window.location.hash){
        var $target  = $(window.location.hash).closest("#bgaboutbody");
        if($target.length)
            $('html, body').animate({scrollTop: $target.offset().top}, 1000);
    }
}, 100);

    Learn to use fallbacks:

    It is always better to make sure your content will load without JavaScript on a sales site like this. (In a web app I feel that is a different discussion). I would recommend using the solution I gave you to this question where you add a js class to the html element in the <head> of the page. Then scope your CSS like this:

    .js #contact, .js #about, etc { display:none }

    So it will only be hidden if JS is present. Additionally, since this solution is also using JavaScript its important they are visible if JS is disabled so it still works.

    • 0