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 Jacob Thomson
Jacob Thomson
757 Points

Smooth scroll, JavaScript

Hey guys, I found a website that gave me some code to be able to click on a fixed button and make it scroll down the page to the desired spot, but i have no knowledge on JavaScript, so i don't know where to copy and paste the code that i got from this site

http://css-tricks.com/snippets/jquery/smooth-scrolling/

The code is

$('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
             scrollTop: target.offset().top
        }, 1000);
        return false;
    }
}

});

Using HTML i was able to make it move down the page instantly, but I'm after a nice scroll effect.

This is the code to my button

<a href="#about"><img src="images/sitelayout_06.jpg" width="60" height="59" alt=""></a>

This is the code to the desired spot on my page

<img id="about" src="images/sitelayout_39.jpg" width="323" height="204" alt="">

Thanks a lot!

3 Answers

Samuel Webb
Samuel Webb
25,370 Points

I took a look at the demo page and from the looks of it, you can just paste that code in-between some script tags in the head of your HTML file. If you already have your sections hash# connected(sounds like you do), it should work fine. I'm not sure what the HTML on your page looks like so if it doesn't work, I'll need to see your HTML so I can troubleshoot.

Samuel Webb
Samuel Webb
25,370 Points

Since you said you have no knowledge of JS just know you can't use the same script tag to import JS and do your own JS on the page. You'd need a different script tag for each. Here's an example of what I'm talking about:

<head>
    <script src="http://ImportingScript.com/js.js"></script>
    <script>
        You can put as much JS in here as you want, because you
        didn't use an src attribute on this script tag.
    </script>
</head>
jasonchow
PLUS
jasonchow
Courses Plus Student 3,591 Points
jasonchow
jasonchow
Courses Plus Student 3,591 Points

Hi Jacob,

I can't see your HTML page code example. Basically, you have to:

  1. include the jQuery library
  2. include the copied jQuery code snippet between a pair of script tags
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a id="#fixed-button" href="#desired-spot">Go to desired spot</a>
    <div id="#desired-spot">Desired spot</div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $('a[href*=#]:not([href=#])').click(function() { 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
    </script>
</body>
</html>

For more info, please read http://learn.jquery.com/about-jquery/how-jquery-works/

Jacob Thomson
Jacob Thomson
757 Points
Jacob Thomson
Jacob Thomson
757 Points

Thanks so much guys for your replies! I really appreciate it.

Samuel Webb, jasonchow

Samuel Webb
Samuel Webb
25,370 Points

You're welcome man. Just glad I could help.