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');
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 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();
});
});
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);
}
});
For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->
Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});
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);
});