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