Develop Reference

jQuery utilizing smooth scroll

I'm having some difficulty getting my webpage to utilize a smooth scroll. I have a navbar at the top of the page with 4 options on it. Each option corresponds to a section further down on the page. I would like to be able to click on those items in the navbar and have a smooth scroll down to its corresponding section. I've tried utilizing both the below questions (among several other online resources!!), but I can't seem to get it work. Any assistance offered would be much appreciated! Summarized version of code is below
jQuery scroll to element
Smooth scroll anchor jquery
HTML
<ul id="navbar">
<li><a class="about" href="#about">ABOUT</a></li>
<li><a class="shop" href="#shop">SHOP</a></li>
<li><a class= "featured" href="#featured">FEATURED</a></li>
<li><a class="updates" href="#updates">UPDATES</a></li>
</ul>
<div id="handcrafted"></div>
<div id="shop"></div>
<div id="featured"></div>
<div id="updates"></div>
JS
$('.about').click( function() {
$('html, body').animate({
scrollTop: $('#about').offset().top
}, 400);
});
$('.shop').click( function() {
$('html, body').animate({
scrollTop: $('#shop').offset().top
}, 400);
});
$('.featured').click( function() {
$('html, body').animate({
scrollTop: $('#featured').offset().top
}, 400);
});
$('.updates').click( function() {
$('html, body').animate({
scrollTop: $('#updates').offset().top
}, 400);
});

<div id="handcrafted"></div> should be <div id="about"></div>
And if you're dealing with <a>, I suggest to add e.preventDefault() all the time unless you want a pure <a>.
$('a').click( function(e) {
e.preventDefault()
$('html').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 400);
});
div{
height: 50vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="navbar">
<li><a class="about" href="#about">ABOUT</a></li>
<li><a class="shop" href="#shop">SHOP</a></li>
<li><a class= "featured" href="#featured">FEATURED</a></li>
<li><a class="updates" href="#updates">UPDATES</a></li>
</ul>
<div id="about">ABOUT</div>
<div id="shop">SHOP</div>
<div id="featured">FEATURED</div>
<div id="updates">UPDATES</div>

Is it possible to add class active without using a href?

I created a 1 pager website but I am using a js to avoid seeing the hash in the url.HTML:
<ul class="click crsl">
<li><a class="page1 dot active"></a></li>
<li><a class="page2 dot"></a></li>
<li><a class="page3 dot"></a></li>
<li><a class="page4 dot"></a></li>
</ul>
JS:
<script type="text/javascript">
$(".page1").click(function() {
$('html, body').animate({
scrollTop: $("#pageOne").offset().top
}, 1000);
});
<-- up to page4 and #pageFour -->
</script>
All tutorials are showing me how to add/remove the class active to li a tags but they all use `a href="#idOfDiv".
It'll cause my first script useless because the url will be
http://mywebpage.com/#pageOne

You can just add the class within your click handler:
<script type="text/javascript">
$(".dot").click(function() {
$('html, body').animate({
scrollTop: $("#pageOne").offset().top
}, 1000);
$('.active').removeClass('active');
$(this).addClass("active");
});
</script>

<ul class="click crsl">
<li><a class="page1 dot active"></a></li>
<li><a class="page2 dot"></a></li>
<li><a class="page3 dot"></a></li>
<li><a class="page4 dot"></a></li>
</ul>
JS:
<script type="text/javascript">
$("li a").click(function() {
$('html, body').animate({
scrollTop: $("#pageOne").offset().top
}, 1000);
$('.active').removeClass('active');
$(this).addClass('active');
});
<-- up to page4 and #pageFour -->
</script>

Smooth animation not working when on the same page as target element

I have a navigation where one of the li is an anchor link to a solution overview on the root page ("Home"). I use this js to scroll to the element if I am on another page:
$(document).ready(function() {
if (window.location.hash) {
//setTimeout(function() {
//$('html, body').scrollTop(65).show();
$('html, body').scrollTop(0);
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 65
}, 2000);
//}, 0);
console.log('Yes');
}
});
It works fine if I am on another page ... but If I'm on the root page the animation does not work. Why?
Navigation:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Company</li>
<li><a class="scroll-to" href="domain/#solution1/" target="_top">Solution 1</a></li>
<li>Team</li>
<li>Location</li>
</ul>
</div>
</nav>
Anchor element on root:
<div id="solution1"></div>
Update: When putting it in a function it also not doesn't work. The redirection and scrolling works ... but not the animation if I am on the same page as the element:
$(document).ready(function() {
function scrollAnchor() {
if (window.location.hash) {
setTimeout(function() {
//$('html, body').scrollTop(65).show();
$('html, body').scrollTop(0);
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 65
}, 2000);
}, 0);
}
}
scrollAnchor();
$('.scroll-to').on('click', function() {
scrollAnchor();
});

Script works in chrome but not in firefox

I have a script that works just fine in chrome but not in Firefox and I have no idea why this is. The script is suppose to scroll down to an id from an anchor but does nothing in Firefox.
Example how I use the script below!
<nav>
<ul>
<li><a class="scroll" target="home">Home</a></li>
</ul>
</nav>
<div id="home">
.....
</div>
<script>
$('.scroll').click(function() {
$(document).animate({
scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
}, 1000);
});
</script>

Change $(document).animate to $('html,body').animate.
http://jsfiddle.net/mblase75/vL79H/
That said, I would tighten up your code a bit by using HTML-standard hash links, in case JavaScript is disabled or not working:
<li><a class="scroll" href="#home">Home</a></li>
Then modify the code to accommodate it and remove the unnecessary eval statement:
$('.scroll').click(function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: $($(this).attr('href')).offset().top - 70
}, 1000);
});
http://jsfiddle.net/4FQn7/

How do I implement smooth scrolling with Bootstrap?

I've been struggling for two hours with several different jQuery plugins trying to get smooth scroll to work for my site.
Here is the relevant code right now:
<div class="row-fluid">
<header class="span12 hero-unit">
<ul class="thumbnails">
<li class="span3"></li>
<li class="span2">
<a href="#Blog" class="thumbnail">
<img src="images/nav_icon-01.png" alt="Blog"/>
</a>
</li>
<li class="span2">
<a href="#Projects" class="thumbnail">
<img src="images/nav_icon-02.png" alt="Projects"/>
</a>
</li>
<li class="span2">
<a href="#Contact" class="thumbnail">
<img src="images/nav_icon-03.png" alt="Contact"/>
</a>
</li>
<li class="span3"></li>
</ul>
</header>
</div>
I've deleted all my JS code (because I know that I wasn't using any of them correctly and would like to just start fresh) except this one, because this seems to actually work, but only activate upon page load and I want to know if it's possible to make it work upon click.
<script type="text/javascript">
$('html, body').animate({
scrollTop: $("#Blog").offset().top
}, 2000);
</script>

What mddw mentioned works, except that it will cause a rather big flicker unless you prevent the browser's default action as follows (also, his ending braces were in the wrong order):
$('a.thumbnail').on('click', function(event) {
var to = $(this).attr('href');
$('html, body').animate({ scrollTop: $(to).offset().top }, 500);
event.preventDefault();
});

I don't know this plugin, but based on what works, something like (assuming a recent JQuery) :
$('a.thumbnail').on('click', function() {
var to = $(this).attr('href'); // $(this) is the clicked link. We store its href.
$('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
)};
If your JQuery is < 1.7, you can try .click(), which will work regardless of JQuery version :
$('a.thumbnail').click(function() {
var to = $(this).attr('href');
$('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
});