How to link back from internal page links on wordpress from other page.

It looks like the issue is about relative links. (It's not a WordPress-specific issue.) If you specify the href of a link like this --

href="#about"

-- it will link to the element with an ID of "about" on the current page. The link works when the visitor is on the home page, but they won't work on any other page.

If you want to link to element on the home page, you need to start it with a slash, like this:

href="/#about"

The slash means "first go to the page at the root of this domain." It's the same slash that appears for the blog:

href="/blog"

That means "start at the root of the domain and then load the blog page underneath that."

Does that help?

Thanks. Straight forward when I think about it.

The only issue I have now is the smooth scroll no longer works if you use.

href="/#about"

This is the code for my smooth scroll.

$(function() {
            $('a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                /*
                if you don't want to use the easing effects:
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000);
                */
                event.preventDefault();
            });
        });

});

Trying to get it to work at the moment. Am new to JQuery so help required.

Thanks Kev

The code you have only fires when the visitor clicks on the link without the page changing. It's not possible to have it smooth scroll the way the HTML is written: when the browser goes to the home page with that hash #about appended to the end, it wil automatically jump down to the spot before the JavaScript has time to fire.

You might be able to use JavaScript to have it immediately scroll back to the top and then smooth-scroll back down. I found a similar thread on Stack Overflow that might help you:

if (location.hash != '') {
    var a = $("a[name=" + location.hash.substring(1) + "]");
    // note that according to w3c specs, the url hash can also refer to the id
    // of an element. if so, the above statement becomes
    // var a = $(location.hash);
    if (a.length) {
         $('html,body').animate({
            scrollTop: $(a).offset().top
        }, 'slow');
    }
}

Thanks Randy. Having a look at the code.

Also found this from conversation I had while back.

$(window).load(function () { $("html, body").animate({ scrollTop: $("#element").offset().top }, 800); });

I think the above makes the page scroll on refresh. Thanks for all your help on this one.

I might have been better to load in different headers using wordpress. Work around.

Not giving up but its frustrating when it doesn't work.

other possibility

$(window).bind("load", function() { var urlHash = window.location.href.split("#")[1]; $('html,body').animate({scrollTop:$('.'+urlHash).offset().top}, 4000);
});

I've been thinking about this today, and I'm thinking it might be a little strange to have the links in the navigation do different things, some of them scrolling down while the blog link goes to another page.

I'd recommend taking a look at how Happy Cog handles this: Happy Cog. They have two sections like this, Contact and Blog.

• Their Blog link in the navigation also scrolls down, and the one-page site has some of the blog content highlighted there. That content links to a blog subdomain from there. The blog itself then has completely different navigation.
• Their Contact link is similar. It also links down the page with a link to a contact subdomain. The Contact page, however, has the same navigation as the main site. Notice that when you click the links there to come back to the home page, there's no scrolling.

Agree. Makes more sense to have this approach. Clicking the links on my website is confusing.

Like the approach of the contact page. Plus this would force me to learn more about building forms of my own.

Having the blog a different design makes sense.

Am really glad you point this out to me.

Back to coding up the html and css first then back to wordpress.

thanks again Kev

Hi Randy took your advice and amended.

Few issues still to work on.

Just wanted to say thanks for your support, help and feedback.

update site