hash links to centent within a page

Hi,

I have a site which has a navigation item which simply scrolls to an ID within the page. e.g.

<a href="#whyjoin">Why Join</a>

and bit of jquery to scroll gently down to this div on the home page:

<div id="whyjoin">
...
</div>

So from the home page it simple takes to use down to that part of the page - no problem.

But - from other pages, it just takes the user to the home page (without scrolling to the content)
I'm not sure how to create the link.

I'm just not sure how to structure the weblink to get this to work from anywhere on the site - any advice?

Thanks
Andy

You need to have the hash anchor link on the URL. If you use a MODX link tag,

Quote from: sottwell at Apr 01, 2016, 02:41 PM

You need to have the hash anchor link on the URL. If you use a MODX link tag,

<a href="[[~42]]#whyjoin">Why Join</a>

Thanks for this. It's still not working though.
The weblink is now:
[[~1]]#why-join

and the script to do the scroll is:

<script>
$(document).ready(function() {
var offsetSize = $("header").innerHeight();
$("html, body").animate({scrollTop:$(window.location.hash).offset().top-offsetSize }, 500);
});
</script>

and I have a section:

<section id="why-join">


It's not even JUMPING to the content, let alone scrolling.

I can't work out why?

You're using the ID of your home page in your link tag. That's why it's sending them there.

Try this:



You also need a place to jump to later in the page:



That will jump there but it won't give you your scroll. To do that, I think you'd need something with an OnClick event rather than an href. The OnClick would that call a JavaScript function with an argument for the location to scroll to.

All modern browsers use an ID attribute on any HTML element as the jump target, no need for named A tags.

Right, but you still need a place to jump to. I prefer the named A tag because it's clear that it's a target, and because you can put it an arbitrary distance above the true target.