Link to different page -> jquery scroll to specific anchor

Question

At the bottom of my home page I have included a contact form and specified the anchor for this section as div id="contact".

When the contact button is clicked on any page it should navigate to the homepage and on page load, scroll automatically to the contact form.

I've been unsuccessful in getting this to work after reviewing a similar question I found here: jQuery scroll to ID from different page When I try, it just jumps to the form. I want it to scroll smoothly.

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li>

The problem jquery function to scroll to the contact anchor on the home page from other pages:

(function($){
    var jump=function(e) {
        if (e) {
            e.preventDefault();
            var target = $(this).attr("href");
        } else {
            var target = location.hash;
        }

        $('html,body').animate({
            scrollTop: $(target).offset().top
        },1000,function() {
            location.hash = target;
        });
    }

    $('html, body').hide()

    $(document).ready(function() {
        $('a[href^=#]').bind("click", jump);

    if (location.hash) {
        setTimeout(function(){
            $('html, body').scrollTop(0).show()
            jump()
        }, 0);
    } else {
      $('html, body').show()
    }
});

I'm trying to achieve something similar to this example: http://vostrel.cz/so/9652944/page.html difference being that instead of the "anchor id" in this case appearing on both pages, the anchor id (contact) for me only appears on one page (home).

Answer 1

Try this, your script is OK only the last line is missing

 (function ($) {

     var jump = function (e) {
         if (e) {

             e.preventDefault();
             var target = $(this).attr("href");

         } else {

             var target = location.hash;

         }
         $('html,body').animate({

             scrollTop: $(target).offset().top

         }, 1000, function () {

             location.hash = target;

         });
     }

     $('html, body').hide();

     $(document).ready(function () {
         $('a[href^=#]').bind("click", jump);

         if (location.hash) {
             setTimeout(function () {

                 $('html, body').scrollTop(0).show()
                 jump();

             }, 0);
         } else {

             $('html, body').show();

         }
     });
 })(jQuery)

Answer 2

I'm not sure what your code is, but i've been able to get it working. One thing is, the code you posted, it's missing a })(jQuery) at the end. Anyway, check out what i did here, i think it's what you're looking for. I'm not sure what your website's HTML looks like, but i think you can adapt it. All you need to do is set the href attribute of the contact button to index.html#contact. On index.html, you can just use #contact and it will do the same thing.

In index.html, Header:

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="#contact">Contact</a>
</div>

but in any other page:

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="index.html#contact">Contact</a>
</div>

removing index.html in the header in index.html prevents the page from being loaded twice, so that jQuery simply scrolls the page down.

Answer 3

Little tip I came across while testing out your code:

Because you're using the href attribute of the anchor tag, it comes over as #contact, which jQuery interprets as an ID.

You will need to add an id="contact" to the anchor in order for it to work, regardless of the page it's on.