CODEWITHSUNDEEP
javascriptjqueryhtmldjangoanchor
Justin
Justin

Reputation: 137

Anchoring Across Different Pages

So right now I have a script that allows anchoring, but it only works within the page I am currently on.

    $('.menu a').click(function(){
        var question = this.innerHTML;
        var answer = $.find('dt:contains(' + question + ')');
        $('html, body').animate({
            scrollTop: $(answer).offset().top
        }, 200);
        return false;
    });

  <div class="menu">
        <div>
            <h3 class="heading"><a href="/about">About</a> <span class="expand">+</span></h3>
            <ul class="subheader">
                <li><a href="/about">How Can You Help?</a></li>
                <li><a href="/about">How can I submit a show?</a></li>
                <li><a href="/about">Who are we?</a></li>
            </ul>
        </div>

        <div>
            <h3 class="heading"><a id="contact" href="contact">Contact</a> <span class="expand">+</span></h3>
            <ul class="subheader">
                <li><a href="contact">Email</a></li>
                <li><a href="contact">On Site</a></li>
                <li><a href="contact">Social Media</a></li>
            </ul>
        </div>
</div>

What I'm trying to figure out is how to alter my current script so that I can anchor myself to the correct position on the next page.

For example, I am currently on my About page, but I click on "Email" in my menu. What I want to happen is for the page to redirect itself to the Contact page their anchor itself to where Email is. Right now, it just puts me on the top of the page.

I'm trying not to do this with several id's because these aren't my only pages so it would not be the best idea to have over 30 id's just to get this to work. I guess that's my last resort though.

Upvotes: 0

Views: 68

Answers (2)

000
000

Reputation: 27247

The question isn't clear, but I assume you have a javascript function that takes a string and finds the correct place to send the user. In that case, you can run this on page-load with the page's current hash:

$(function() {
    if (location.hash) {
        var question = location.hash;
        var answer = $.find('dt:contains(' + question + ')');
        $('html, body').animate({
            scrollTop: $(answer).offset().top
        }, 200);
    }
});

And your email link can look like this:

<li><a href="contact#email">Email</a></li>

Or, if you want to use the <a> content as the hash:

<li><a href="contact">Email</a></li>
...
$(function() {
    $('a').each(function(){$(this).attr('url',$(this).attr('url')+'#'+$(this).text())});
});

this will turn that link into:

<li><a href="contact#Email">Email</a></li>

Upvotes: 1

Kylie
Kylie

Reputation: 11749

Just do...

<li><a href="contact#email">Email</a></li>
<li><a href="contact#onsite">On Site</a></li>
<li><a href="contact#social">Social Media</a></li>

Then set the anchors on the page youre talking about

Like so....

//email section to link to
 <div id="email"></div>
//onsite section to link to
 <div id="onsite"></div>

Upvotes: 0

Related Questions