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

HTML Introduction to HTML and CSS (2016) HTML: The Structural Foundation of Web Pages and Applications Anchor Tags

if I click on linked text can I add a smooth swipe to the top ?

when we use this code "<p> <a href="#top"> I hope you Enjoy! :)</a></p>" , we press at the "I hope you enjoy !" it send us to the top but is there a way that can be done in smooth way

mariuszanou
mariuszanou
16,394 Points

Hi, yes there is a way but it requires some JavaScript

2 Answers

Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello! As it is said before, you have to use JavaScript or it's library Jquery for that. You can do it like this:

Asign the same class (in my example I called it "link", but you can choose any adding the same changes to the script) to all links you want to use in swipe. Also give unique id to each page block you want to scroll smoothly and a href to the link like this.

           <p id="about"> Information about company and so on. </p> 
            <li><a class="link" href="#about ">About</a></li> 

Then add the code below before your closing </body> tag. 1500 (stands for speed, you can do it faster or slower as you prefer, giving more or less number accordingly).

<script
          src="http://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>

        <script type="text/javascript">
          $(document).ready(function() {
            $("a.link").click(function () {
              var clicks = $(this).attr("href");
              var scrolls = $(clicks).offset().top;
              $('html,body').animate(
               { scrollTop: scrolls }
               , 1400 );
              return false;
            });
          });
        </script>

Thanks! but still I didn't learn Javascript

Robert Stefanic
Robert Stefanic
35,170 Points

It cannot be done without adding some JavaScript.

As a simple analogy, think of a website like this:

The HTML serves as the skeleton/outline of the website.

The CSS changes the look of the site.

The JavaScript changes the behavior of the site.

What you're describing (adding a smooth swipe to the top) would fall under the behavior category. So I would say go ahead and try to add it to your site by learning some JavaScript.

EDIT: fixed a sentence.

Thanks!