Issue in Smooth scrolling through js - javascript

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

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>

Is it possible to add class active without using a href?

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>

Autoscroll goes too far in webpage

I am testing a bootstrap webpage, auto scroll works on desktop but scrolls to far on mobile and makes my <h2> disappear and leave only the <p> tags visible.
Why does this scroll down not scroll to the beginning of the section?
Can anybody help me out? Many thanks
Menu:
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">Over</a>
</li>
<li>
<a class="page-scroll" href="#Teams">Teams</a>
</li>
<li>
<a class="page-scroll" href="#sponsoren">Sponsoren</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
Section:
<section id="about" class="content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 wow fadeInDown" data-wow-delay=".2s ">
<h2>test</h2>
<p>test</p>
</div>
</div>
</section>
css:
.content-section{}
js:
// jQuery to collapse the navbar on scroll
function collapseNavbar() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
$(window).scroll(collapseNavbar);
$(document).ready(collapseNavbar);
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

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

scroll to the top jquery

im trying to create a simple "scroll jump to target". i have made the parts which it jumps to everywhere except the "scroll to top". the jump works on id of the tag so it jumps to everywhere fine but since i have my nav bar position fixed, it wont jump to the top. here is my code to make it simpler to understand:
<ul class="nav navbar-nav">
<li class="active"><a id="home" href="#home">Home<span class="sr-only">(current)</span></a></li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
further down:
<div id="wall_1" class="myImage" data-stellar-background-ratio="0.4" ></div>
<div id="content_1" class="myContent">
<div id="services"></div>
...
<p>Go to the top</p>
</div>
<div id="wall_2" class="myImage" data-stellar-background-ratio="0.4" ></div>
<div id="content_2" class="myContent" >
<div id="about"></div>
...
<p>Go to the top</p>
</div>
<div id="wall_3" class="myImage" data-stellar-background-ratio="0.4" ></div>
<div id="content_2" class="myContent">
<div id="contacts"></div>
...
<p>Go to the top</p>
</div>
JS:
<script>
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 81
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
how can i jump to the top (scroll to 0) now?
This should work:
$('html, body').stop().animate({
'scrollTop': 0
}, 800, 'swing');

Categories

Resources