Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

Need some help with my redesign.

I have a static front page with internal page scrolls.

Am loading the same navigation on the blog page. Is there a way to link back to the static home page or will I need to load in different navigation file.

my new site redesign

Still browser testing so if you notice bugs then let me know. I know I have a issue with the svg logo on safari.

8 Answers

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

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

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

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);
});

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

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