发表新帖
发表新帖

anchor linking to a certain position of the page

前端 未结
关注
7 2108
渐次进展
渐次进展 2021-01-06 18:06

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. H

相关标签:
7条回答
  • 我在风中等你
    2021-01-06 18:24

    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 讨论(0)
  • 北恋
    2021-01-06 18:25

    here is my solution.

            $('.container').on('click', function(e){
            var hash        = $(this).find('a').attr('href'),
                target      = $('html').find('p'+hash),
                location    = target.offset().top;

            $('html, body').stop().animate({scrollTop: location}, 1000);

            e.preventDefault();
        });

    html would be like:

    <div class="container">
   <a href="hash">click me</a>
</div>

<p id="hash"></p>

    So when clicked on the anchor it will scroll to the respective anchor in the document.

    0 讨论(0)
  • 花落未央
    2021-01-06 18:26

    You can do this with simple html using the hash url "#". For example:

    <a id="somelocation"></a>

    Can be auto-scrolled into view by clicking a link like:

    <a href="#somelocation">Go to somelocation on this page</a>

    This can be done with links to other pages too.

    <a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>
    0 讨论(0)
  • 闹比i
    2021-01-06 18:32

    First thing you'll have to do is to define an anchor somewhere in the target page:

     <a name="myAnchor" />

    Let's say the target page is called "website.html". You will then have to append the anchor to the link:

     <a href="website.html#myAnchor">Click here</a>

    Best wishes,
    Fabian

    0 讨论(0)
  • 走了就别回头了
    2021-01-06 18:33

    I was looking for a better way to do this, but I cannot find one. My solution was to create a zero-width anchor at the target point, pull it out of normal flow via "position: relative" and make sure that the content box was as high as it needed to be to force the following element farther down on the page:

    <a name="target" style="position: relative; padding-top: 200px">&#x200B;</a>

    Pulling it out of normal flow keeps the padding from becoming part of the page, but when calculating the offset all the browsers I tested respect it when positioning. Of course, this only works for fixed offsets from the top of the viewport. It works, but it feels kludgy.

    0 讨论(0)
  • 太阳男子
    2021-01-06 18:44

    Use the name attribute.

    0 讨论(0)
 看不清?
提交回复
热议问题