anchor linking to a certain position of the page_问答_开发者

I have an anchor link which links to another page. When it is clicked, by defa开发者_高级运维ult 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.

Use an anchor like this in your target document:

<a name="anchor1"></a>

<a id="anchor1"></a>

and in your source document:

<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>

or within the same document:

<a href="#anchor1">Go to anchor 1</a>

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.

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

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.

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>

Use the name attribute.

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.