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 trialkaram Daabul
484 Pointsif 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
2 Answers
Evgeniia Mas
4,452 PointsHello! 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>
karam Daabul
484 PointsThanks! but still I didn't learn Javascript
Robert Stefanic
35,170 PointsIt 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.
karam Daabul
484 PointsThanks!
mariuszanou
16,394 Pointsmariuszanou
16,394 PointsHi, yes there is a way but it requires some JavaScript