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>
Related
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>
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();
});
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.
I am trying to scroll smoothly using js but it is not working.what's wrong with my code. The structure is something like this.
HTML
<ul class="nav">
<li><a target="main" id="main-nav">Home</a></li>
<li><a target="club" id="club-nav">Club</a></li>
<li><a target="contact" id="contact-nav">Contact</a></li>
<li><a target="about" id="about-nav">About</a></li>
</ul>
<div class="wrap">
<div id="main"></div>
<div id="about"></div>
<div id="contact"></div>
<div id="updates"></div>
</div>
JS
$('#main-nav').click(function() {
$('body').animate({
scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
}, 1000);
});
$('#club-nav').click(function() {
$('body').animate({
scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
}, 1000);
});
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);
});