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
Orsolya Szentes
6,200 PointsI would like the page to smooth scroll to specified div on click. I can't make it work. Can you please take a look?
<head>
<!-- Required meta tags -->
<script src="https://use.fontawesome.com/ae761c45ee.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
</head>
<a href="#about"><img src="img/arrow-211-64.png"></a>
<div class="container">
<div class="row">
<div class="col-md bg-white">
<div class="card mt-3" id="about">
<div class="card-block text-grey">
<h4 class="card-title">Why Growth Tribe?</h4>
<p class="card-text">As a freelance business consultant I wanted to get an in-depth understanding of digital marketing and growth startegies so I can expand my area of expertise and advise businesses on a wider range of solutions.</p>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
And the jQuery:
$(function() {
$('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;
}
}
});
});
Once I click on the link (arrow), it just jumps straight to the section, there is no smooth transition.
I have tried several suggestions on the web, but can't make it work, the result is always the same.
I am working with Bootstrap, but I am not aware of any reason why the two shouldn't work together?
I think I also linked my sheets correctly, I have included those in the script above.
Many thanks in advance for the help!
5 Answers
Craig Watson
27,930 PointsHi,
This is the code I used for smooth scrolling in a BS3 Pen.
//Smooth Scrolling For Internal Page Links
$(function() {
$('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;
}
}
});
});
you can find the link here - http://codepen.io/Craig-Watson/pen/XbjGex?editors=0010
Craig
Jesus Mendoza
23,289 PointsHey Orsolya!
That's happening because you are loading your jQuery code before you load the jQuery library! Place the script tag that loads your code at the bottom of all script tags!
Orsolya Szentes
6,200 PointsHey,
thanks, I have just changed that, but the problem persist. Still no idea why. Any other suggestions?
Jesus Mendoza
23,289 PointsCan you add your new code?
Jesus Mendoza
23,289 PointsYour code has a lot of divs that have not been closed, try to close all of them and see if it works
Orsolya Szentes
6,200 PointsSorry, that's just because I only pasted in a snippet..
<script src="https://use.fontawesome.com/ae761c45ee.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
Orsolya Szentes
6,200 PointsI am working in treehouse's workplaces, which highlights in red any unclosed divs (to my knowledge), and I don't see any.
Jesus Mendoza
23,289 PointsYou have 7 divs and you only close 2 of them. Check it out!
Orsolya Szentes
6,200 PointsLike I said, this is NOT the whole code!!
I only pasted in a part of it, the relevant part, div-s are not the problem.
I am working in workspaces that automatically highlights any unclosed divs. I don't have any.
I have created a fiddler with all the html, javascript and css im using, please check it out.