How do I implement smooth scrolling with Bootstrap? - javascript

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);
});

Related

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>

One Page Website - Navigation Highlight Current Section

I'm having problems integrating a navigation bar that highlights the current section being viewed on the website. I just want the currently viewed section to be bold in the navigation bar.
Here is the codepen:
HTML
<nav id="nav-wrap">
<ul>
<li class="current"><a class="page" href="#home">Home</a></li>
<li><a class="page" href="#about">About</a></li>
<li><a class="page" href="#portfolio">Portfolio</a></li>
<li><a class="page" href="#scrapbook">Scrapbook</a></li>
<li><a class="page" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-content">
<img id="logo" src="img/logo.png" alt="logo" height="200px" width="200px">
<h3>Joseph Cooper</h3>
<h3>Graphic Designer</h3>
<p> 10.03.97 </p>
</div>
<img id ="down" src="img/down.png" height="42px" width="42px">
I added two line of code, one to remove bold from all href in navigation, and one to add bold to href that is clicked. Take a look at codepen: http://codepen.io/anon/pen/doaRjy
function smoothScroll (duration) {
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
$("#nav-wrap a").css('font-weight','normal')/*this line remove bold from all href*/
$(this).css('font-weight','bold')/*this line add bold to clicked href*/
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, duration);
}
});
}
I tried to solve this by using the jQuery's offset().top and checking it against the window's scrollTop.
var $window = $(window),
homeLink = $("a[href='#home']"),
aboutLink = $("a[href='#about']"),
portfolioLink = $("a[href='#portfolio']");
$window.on("scroll", function(e) {
if ($window.scrollTop() < $("#about").offset().top) {
$("#nav-wrap").find("a").css("font-weight", 400);
homeLink.css("font-weight", 900);
} else if ($window.scrollTop() > $("#about").offset().top && $window.scrollTop() < $("#portfolio").offset().top) {
$("#nav-wrap").find("a").css("font-weight", 400);
aboutLink.css("font-weight", 900);
}
});

JavaScript works in Chrome not in Firefox

I have a navbar that works in Chrome(41.0.2272.89) but not in Firefox(36.0.1).
HTML
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a class="navBtn" onclick="scrollTo(home)" title="#home">Home</a></li>
<li><a class="navBtn" onclick="scrollTo(about)" title="#about">About</a></li>
<li><a class="navBtn" onclick="scrollTo(clients)" title="#clients">Clients</a></li>
<li><a class="navBtn" onclick="scrollTo(portfolio)" title="#portfolio">Portfolio</a></li>
<li><a class="navBtn" onclick="scrollTo(contact)" title="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
Using a simple onclick, it will activate my JS
JS
function scrollTo(element) {
if(element == document.getElementById('home')) {
$('html, body').animate({
scrollTop: $(element).offset().top - 54
}, 500);
} else {
$('html, body').animate({
scrollTop: $(element).offset().top - 53
}, 500);
}}
It seem the JS activates in Chrome but not in Firefox.
What is supposed to happen is that when you click a item, the site will scroll down to it. This used to work fine, but now it suddenly now longer works.
Example HERE
scrollTo must be a reserved word due to their own Window.scrollTo() function.
function moveTo(element) {
if(element == document.getElementById("home")) {
$("html, body").animate({
scrollTop: $(element).offset().top - 54
}, 500);
} else {
$("html, body").animate({
scrollTop: $(element).offset().top - 53
}, 500);
}}
So changing the function name returned normal functionality.
Seems to me your onclick definitions are faulty.
Instead of:
<li><a class="navBtn" onclick="scrollTo(about)" title="#about">About</a></li>
Try using single quotes around the DIV names like:
<li><a class="navBtn" onclick="scrollTo('about')" title="#about">About</a></li>
This will also require some adjustments to the function code as well to handle passing the name of the DIV instead of the object.

Menu scrolls to div WITHOUT animation

So i got a onepage website which has menu points that scroll to a div on click. This is working so far. I implemented a jquery function that should give the whole thing an animation but somehow it does not work.
Here is the HTML:
<div class="mainmenu">
<div class="menuwrapper">
<div class="menulist">
<ul class="items">
<li class="menuitem">
HOME
</li>
<li class="menuitem">
TEAM
</li>
<li class="menuitem">
LEISTUNGEN
</li>
<li class="menuitem">
KNOW-HOW
</li>
<li class="menuitem">
KONTAKT
</li>
</ul>
</div>
</div>
</div>
and this is the js:
$(document).ready(function(){
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500, "swing");
return false;
});
$(window).resize(function(){
sliderResize();
});
});
someone has an idea?
The problem is that when clicking on the <a> tag, it still does what an <a> tag does... bring you to the link (in this case an anchor tag).
To avoid the default link action, you need to add code to prevent it:
$('a').click(function(e){
e.preventDefault(); // This will stop the default jump to anchor
// Now you can add your smooth scroll animation
Read the preventDefault() documentation for more information.

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/

Categories

Resources