Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

scrollTo in switch statement

I am having trouble getting my script to do any scroll actions for some reason. I am using a switch statement to determine which link was clicked, then I want to have the page scrolled to the top of the page. For some reason my console log statement is firing but the page is not scrolling to the top. When I type window.scrollTo(0, 0); into the console though the page scrolls up...here is my script, any help is appreciated.

var URL = window.location.href;
var baseURL = window.location.protocol+'//'+window.location.host+window.location.pathname;

switch(URL) {
    case baseURL+'#skills':
        window.scrollTo(0, 0);
        console.log('you are on skills');       
        break;
    case baseURL+'#experience':
        window.scrollTo(0, 0);
        console.log('you are on expereince');       
        break;
    case baseURL+'#works':
        window.scrollTo(0, 0);
        console.log('you are on works');        
        break;
}

2 Answers

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Ok I found a much simpler solution...all I needed to do was adjust the anchor links to have a certain class so that the browser wouldn't jump to that link immediately, then once the browser is loaded, scroll down to the anchor of the appropriate class. 

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

where the anchor link would looks something like this.

<h2><a class="works">Portfolio</a></h2>
Marcus Parsons
Marcus Parsons
15,719 Points

Awesome man! I'm glad you found it :)

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

David,

I had no problem getting your code to work at all. I'm not sure why you're using JavaScript to do this. I'd highly recommend simply doing this via HTML. You can go to any element with an id by referencing the id in an anchor link. So, if you have an element at the top of your page with an id of "top", you can go there by typing:

<a href="#top">Go to top</a>

But here is the JavaScript version: http://codepen.io/anon/pen/KpaZme

Marcus Parsons
Marcus Parsons
15,719 Points

Also, notice that I left out the "window" object in the JavaScript. You don't have to include "window" for window objects.

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Well I am coming from another page. The eventual goal is to be able to click the nav link to this page, start at the top of the page, then smooth scroll down to that anchor link.

Marcus Parsons
Marcus Parsons
15,719 Points

It's just as easy to link to a specific section in another page:

<a href="anotherpage.html#top">Go to Top of Another Page</a>
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Ya I have already done that, but I am coming from another page. So when I click on that nav link it just takes me to that location on the page (instantly), I want to start at the top and smoothly scroll down to that spot when I click on the nav link.

Marcus Parsons
Marcus Parsons
15,719 Points

Gotcha! Perhaps my reading skills are a bit off right now haha That's an interesting conundrum. Let me see what I can come up with. Maybe someone will come along who already has a solution, but I'm going to work on something in the meantime, as well.

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Ya its a real puzzler because like I said, when I am on the page and type window.scrollTo(0,0) the page scrolls to the top......I feel like it might have something to do with the switch statement?