0

What I am trying to achieve is that if someone clicks on the specified link in the menu, it redirects to the homepage and then scrolls to the specific content.

My Jquery code is this simple:

$(document).ready(function () {        
  $("#upbar li:nth-of-type(2)").click(function(){
    $(location).attr('href', 'index.html');
    $('html,body').animate({
      scrollTop: $("#samples").offset().top}, 700);
    });
  });

It redirects to the index.html page but it does not scroll :/

Thank you in advance!

Martin

Zachary Kniebel
  • 4,628
  • 3
  • 24
  • 52
user3316749
  • 29
  • 6
  • 1
    It's normal that it doesn't scroll because a script is executed on the same page. As soon as the page changes, the script gets reloaded. Instead, you setup your link with index.html#samples and the have jquery detect if there is a hash and then scroll to the desired section. – VVV May 06 '15 at 15:18
  • 2
    Took me a minute to realize that `$(location).attr('href', ...)` is equivalkent to `window.location.href = ...`. That's a very unidiomatic way to do a redirect. – Barmar May 06 '15 at 15:20
  • Look at this answer and the demo: http://stackoverflow.com/a/20736395/244537 – VVV May 06 '15 at 15:20
  • You're also missing the closing to your `$(document).ready`, but I'm sure that was just an omission during copy & paste ;) – Zachary Kniebel May 06 '15 at 15:21
  • @Barmar I don't think it's the same. `$(location).attr('href', ...)` simply changes the `href` when `onClick`. So if he would add a `return false` at the end, the redirect would never happen. But if he would have written `window.location.href` the redirect would be instant. – VVV May 06 '15 at 15:23
  • 1
    @vyx.ca But `location` is not a DOM element. It's not like he's changing the `href` of an anchor, it's a special variable that contains the page URL. – Barmar May 06 '15 at 15:24
  • @Barmar oooohhh you're right. I thought it was a variable declared outside the scope or something! Good catch! – VVV May 06 '15 at 15:28
  • Oh my, thanks a lot! I did not realize that it will automaticaly stop after redirect. I am a jquery newbie. Thanks for all your answers! – user3316749 May 06 '15 at 15:33

1 Answers1

2

Assuming location is targetting window.location in your example to change browser URL...

Changing the location of the browser will load a new page and throw away the running jQuery/JavaScript. $('html,body').animate( will never run on the intended new page.

  • Why not just use a bookmark anchor to the target page?

e.g.

$(location).attr('href', 'index.html#samples');

or better yet just:

location.href = "index.html#samples";

  • Or you can load the page using Ajax, so your code stays resident

  • Or pass something to the new page to tell it where to scroll

Gone Coding
  • 88,305
  • 23
  • 172
  • 188
  • Thank you! I will stick with this solution until I figure out a way to animate it :) – user3316749 May 06 '15 at 15:34
  • If you want to animate it, use Ajax to load the pages and something like History.js to update the browser URL to match. – Gone Coding May 06 '15 at 15:35
  • That is faar beyond my skills mate. I am just learning JS now and seems like I have a lot of studying to do :) Anyways THX! I will definetly look into ajax later – user3316749 May 06 '15 at 16:02