Link to another page & # 8594; jquery scroll to a specific anchor

Question

At the bottom of my homepage, I included a contact form and indicated the anchor for this section as div id = "contact".

When the contact button on any page is pressed, it should go to the home page and load the page, automatically scroll to the contact form.

I was unsuccessful after looking through a similar question that I found here: jQuery scrolls to ID from another 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> 

Function jquery problems to navigate 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 the difference is that instead of the "binding identifier" in this which is displayed on both pages, the binding identifier (contact) for me displayed on only one page (at home).

Answer 1

Try it, your script is fine, 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 was able to get it to work. One thing, the code you posted is missing at the end })(jQuery) . In any case, check out what I did here , I think this is what you are looking for. I'm not sure what your HTML site looks like, but I think you can adapt it. All you have to do is set the href attribute of the contact button to index.html#contact . On index.html, you can simply use #contact and it will do the same.

In index.html, Title:

 <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 on 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 loading twice, so jQuery just scrolls the page down.

Answer 3

The little tip I came across while checking your code:

Since you use the href attribute of the anchor tag, it appears as #contact, which jQuery interprets as an identifier.

You will need to add id = "contact" to the anchor for it to work, regardless of its page.