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