I've been trying to simplify my code using an '$(input[data-code]").each' function in order to simplify a code. The code is just handling when a user clicks on an anchor link, it animates it down to that spot, it looks like:
$('a.welcome').click(function(){
$('html, body').animate({scrollTop:0}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step1').click(function(){
$('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step2').click(function(){
$('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step3').click(function(){
$('html, body').animate({
scrollTop: $('#step3').offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
And what i've come up with so far to simplify it looks like this:
$("input[data-code]").each(function() {
$(this).click(function(){
$('html, body').animate({
scrollTop: $($(this).data("code")).offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
});
But it doesn't seem to be working :(
My theory is that the $(this).click(function(){ isn't actually properly calling the elements in the style $(a.welcome).click(function(){
The actual HTML for the links looks like so:
<nav id="primary">
<ul>
<li>
<h1>Welcome</h1>
<a class="welcome" href="#welcome" data-code="0">View</a>
</li>
<li>
<h1>Step 1: Setup</h1>
<a class="step1" href="#step1" data-code="#step1">Step 1</a>
</li>
<li>
<h1>Step 2: Data Management</h1>
<a class="step2" href="#step2" data-code="#step2">Step 2</a>
</li>
<li>
<h1>Step 3: Configure Cameras</h1>
<a class="step3" href="#step3" data-code="#step3">View</a>
</li>
</ul>
</nav>
Any ideas?
I'd do it like this, I think.
You want to target anchor tags.
$("a[data-code]").click(function(){
var val = $(this).data("code") ? $($(this).data("code")).offset().top - 70 : 0;
$('html, body').animate({
scrollTop: val
}, 2000, function() {
parallaxScroll();
});
return false;
});
a simple
$('#scroll a').click(function(){
$('html, body').animate({scrollTop: $(this).offset().top - 70}, 2000,
function() {
parallaxScroll();
});
return false;
});
and adding id = "scroll" to the ul
<nav id="primary">
<ul id = "scroll">
<li>
<h1>Welcome</h1>
<a class="welcome" href="#welcome" data-code="0">View</a>
</li>
<li>
<h1>Step 1: Setup</h1>
<a class="step1" href="#step1" data-code="#step1">Step 1</a>
</li>
<li>
<h1>Step 2: Data Management</h1>
<a class="step2" href="#step2" data-code="#step2">Step 2</a>
</li>
<li>
<h1>Step 3: Configure Cameras</h1>
<a class="step3" href="#step3" data-code="#step3">View</a>
</li>
</ul>
</nav>
would work.
Your jQuery code is targeting HTML input tags instead of anchor tags.
Change:
$("input[data-code]").each(function() {
to:
$("a[data-code]").each(function() {
You could use this in on click function
$('#primary a').on('click', function () {
var offSet = $($(this).data('code')).offset().top - 70;
if ($(this).is('.welcome')) {
offSet = 0;
}
$('html, body').animate({
scrollTop: offSet
}, 2000,
function () {
parallaxScroll();
});
return false;
});
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 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'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'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);
});