I am trying to use a swing animation to href to certain parts of my page. However I am not sure what to put to refer to the correct sections of my HTML. I think the best thing to do would be to select the href id that my a tag is referring to. I am open to new approaches
jQuery:
$("li a").each(function() {
$(this).on("click", function() {
var mode = "swing";
$('html, body').animate({
scrollTop: $(/*HERE*/).offset().top
}, 750, mode);
});
})
HTML:
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<ul id="nav_pills" class="nav nav-pills" role="tablist">
<li role="presentation">
About
</li>
<li role="presentation">
<a id="test" href="#services">Services</a>
</li>
<li role="presentation">
Portfolio
</li>
<li role="presentation">
Contact
</li>
</ul>
</nav>
</div>
<!-- about -->
<section id="about">
<div class="border">
ABOUT
</div>
</section>
<!-- services -->
<section id="services">
<div class="border">
SERVICES
</div>
</section>
<!-- portfolio -->
<section id="portfolio">
<div class="border">
PORTFOLIO
</div>
</section>
<!-- contact -->
<section id="contact">
<div class="border">
CONTACT
</div>
</section>
Working demo:
http://jsfiddle.net/p0tavns5/2/
$("li a").each(function() { // $('a[href^="#"]') might be a safer selector
$(this).on("click", function(e) {
var mode = "swing";
e.preventDefault(); //stop the default jump to fragment
$('html, body').animate({
scrollTop: $(this.hash).offset().top // .hash is the element's href
}, 750, mode);
});
})
Source: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
This also has the advantage of graceful degradation. If it doesn't run (noscript or something), it will default to regular fragment linking.
Related
I tried using e.preventDefault(); and return false; at the end of the code those didn't help. Here is my code:
$('.game-nav-inner-game1 .nav-item a').click(function (){
$('html,body').animate({
scrollTop: $(".scrollHere").offset().top - 100
}, 400);
});
And this is my html:
<ul class="nav nav-tabs game-nav game-nav-inner game-nav-inner-game1-events" data-game="game1" data-container="events-container">
<li class="nav-item">
<a class="nav-link" href="#nameofthemap" data-toggle="tab" aria-controls="nameofthemap">
<img src="{$smarty.const.SITE_ADDR}/resources/img/game1-game/maps/nameofthemap.jpg" class="img-fluid game1-map" />
</a>
</li>
</ul>
<div class="tab-content w-100">
<div class="tab-pane fade scrollHere" id="events-container"></div>
</div>
The
I would appreciate if you can help me.
From the code you are posting, I added a wrapper div with class game-nav-inner-game1, since you confirm it is supposed to exist.
And some "spacer" divs...
$('.game-nav-inner-game1 .nav-item a').click(function (){
$('html,body').animate({
scrollTop: $(".scrollHere").offset().top - 100
}, 400);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game-nav-inner-game1">
<ul class="nav nav-tabs game-nav game-nav-inner game-nav-inner-game1-events" data-game="game1" data-container="events-container">
<li class="nav-item">
<a class="nav-link" href="#nameofthemap" data-toggle="tab" aria-controls="nameofthemap">
<img src="{$smarty.const.SITE_ADDR}/resources/img/game1-game/maps/nameofthemap.jpg" class="img-fluid game1-map" />
</a>
</li>
</ul>
</div>
<div style="height:150em;"></div>
<div class="tab-content w-100">
<div class="tab-pane fade scrollHere" id="events-container">HERE</div>
</div>
<div style="height:150em;"></div>
Run the snippet... You'll see that it is working, actually. So your problem is with selectors... Or something else like a typo somewhere.
You can use Javascript Vanilla Element.scrollIntoView. Your snippet (simplified for focus reasons) would look like:
$('.click-here').click(() => $('.scroll-here')[0].scrollIntoView(true))
body {
height: 1500px;
}
.scroll-here {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="click-here" href="javascript:void(0)">Click here</a>
<div class="scroll-here">Scroll here</div>
I am trying to implement a smooth scroll to another section from my navigation.
The following is the javascript function im using
:
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
My HTML is as following :
<div class="module-group right">
<div class="module left" id="nav">
<ul class="menu">
<li class="">
<a href="#">
Home
</a>
</li>
<li class="">
<a id="about" href="#">
About Us
</a>
</li>
</ul>
</div>
</div>
My section is as below :
<section id="about">
<div class="container" id="">
<div class="row" id="">
<div class="col-sm-12">
<h4 class="uppercase mb80">About Us</h4>
<div class="tabbed-content button-tabs vertical">
<ul class="tabs">
<li class="active">
<div class="tab-title">
<span>Introduction</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Let's Talk about</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>History</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our footprints on the sands of time..</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Mission</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Mission</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Vision</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Vision</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
</ul>
</div>
<!--end of button tabs-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
I am facing problems calling the jquery function. I looked up on other questions asked and tried implementing an answer previously given, however it doesnt seem to be working for me.
Change your nav link to About Us.
Then change the function call to goToByScroll($(this).attr("href"));
You can not have two elements with the same id. Use the href like it was intended.
About Us
and when you read the hsah of the clicked anchor
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
basic example:
function goToByScroll(id) {
$('html,body').animate({
scrollTop: $(id).offset().top
},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li> About Us </li>
</ul>
</div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>
Use href attribute to store the id you need to scroll to. Also don't forget to wrap javascript in $(document).ready() to make sure event handlers are attached after the page is ready.
Here's javascript:
$(document).ready(function() {
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
}, 'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll($(this).attr("href"));
});
});
And in HTML:
<li class="">
<a href="#about">
About Us
</a>
</li>
Yet again kind of hard for me to explain but:
I have a navbar where i am using tabs instead of different pages, now in the body of the page i have a tag that says "Click Here" and when you click it, it takes you to the different tab. This works all good but what i want it to do is change the tab that its redirected you to, to make it active (as in add "active" class to the li tag)
My Code:
INDEX.HTML: https://codetidy.com/8755/
Thanks
<html>
<head>
<!-- Bootstrap CSS framework -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<!-- Font-Awesome Icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Bootstrap JS Framework -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body onLoad="move()">
<!-- If your using a mobile device this script will redirect you -->
<style>
#myTab li.active{background:#eeeeee;}
</style>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
<!-- End redirection script -->
<!-- When each item on the navbar is selected it will change the selected tab to an
active tab so it will add the .active {} css and an active class to the li -->
<script>
$(function () {
$('#myTab a:first').tab('show')
$('#myTab li:first').addClass('active')
});
</script>
<!-- End Active Tabs -->
<!-- Active Tabs for individual hyperlinks -->
<script>
$(document).ready(function(){
$("#atab" ).click(function() {
var myHref=$(this).attr('href');
//console.log(myHref);
$('#myTab li a').each(function(){
if($(this).attr('href')== myHref){
$('#myTab li').removeClass('active');
$(this).closest('li').addClass('active');
}
})
});
});
</script>
<!-- End Active Tabs for individual hyperlinks -->
<!-- The Div ID's myBar and MyProgress create a border-bottom looking style for the bottom of the navbar but instead
of it staying still while the page loads it will show what needs to be loaded (at the current time it only
goes through a basic interval and is not moving depending on scripts that have loaded) -->
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
<!-- Navbar -->
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="index.html">Navbar</a>
<ul class="nav navbar-nav pull-right" id="myTab" role="tablist">
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">About</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Resources</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Data</a>
</li>
</ul>
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</nav>
<!-- End of Navbar -->
<!-- Body Information -->
<div class="container tab-content">
<!-- Home Page -->
<div class="tab-pane active" id="home" role="tabpanel">
<div class="container">
<div class="jumbotron highlight">
<div class="information">
<h2>Internet Privacy<h2>
<p>Welcome to the website this is where you can find out about Internet Privacy, click <a id="atab" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">HERE</a> to learn more</p>
<!-- When selecting the "HERE" hyperlink the tab About will become active. -->
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<p class="inforamtion">This is the grid system</p>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<p class="information">This is a different grid size</p>
</div>
</div>
<div class="col-md-3">
<div class="jumbotron">
<p class="information">There multiple sizes in the grid but this is the same as the first one</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Home Page -->
<!-- Start About Page -->
<div class="tab-pane" id="profile" role="tabpanel">
<div class="container">
<!-- Bread crumb -->
<ol class="breadcrumb" style="margin-bottom: 5px;">
<li><a data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a></li>
<li class='active'>About</li>
</ol>
</div>
</div>
<!-- End About Page -->
<!-- Start Resources Page -->
<div class="tab-pane" id="messages" role="tabpanel">
<div class="container">
<!-- Resources Tab -->
<p>Content3</p>
</div>
</div>
<!-- End Resources Page -->
<!-- Start Data Page -->
<div class="tab-pane" id="settings" role="tabpanel">
<div style="padding-top: inherit;" class="container">
<!-- Data Tab -->
<p>Content4</p>
</div>
</div>
<!-- End Data Page -->
</div>
<!-- End of body information -->
</body>
</html>
Is this what you need?
I've just started to code, and am learning all there is to know about JQuery. I have a navbar with 'About' and 'What is this' anchors. The specific content for the respective anchors are in different sections of the page. If I click an anchor, say 'About', I want to jump to the 'About-content' section of the webpage. I have read of plugins which do this, but is there any way to do this simply using JQuery? I tried doing what was told in an answer to a similar question but it doesn't work.
HTML
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
......
......
<div class="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p> text text text </p>
</div>
</div>
</div>
</div>
JQuery
$(document).ready(function () {
$('.About').click(function (event) {
event.preventDefault();
$('body, html').animate({
scrollTop: $(".About-content").offset.top
}, 600);
})
}
Use the id attribute to your target div:
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
Set Nav link to the Div id:
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
Use the following simple jquery for smooth scroll:
$(document).ready(function() {
$(".About a").click(function() {
$('html, body').animate({
scrollTop: $("#About-content").offset().top
}, 2000);
});
});
Change your target .About-content to an #About-content
Change the href to #About-content
Remove e.preventDefault()
It should function without jQ/JS but if you add easing to your animation then it'd be useful.
$(document).ready(function() {
$('.About').click(function(event) {
$('body, html').animate({
scrollTop: $("#About-content").offset().top
}, 600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
<div style="height: 1000px;"></div>
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
Say you have an Nav like this ,
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
And assuming a div like what you have,
Some Content Here
$(document).ready(function(){
$(".navbar-nav a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
});
})
Will animate to the respective areas. Here hash holds the values after # from your <a>tags.
IMHO, its better to bind the click event on the .nav instead of binding with separate <a>'s.
Well i don't know about jquery. but you can do it more simply by bootstrap. Like this. It is called bootstrap scrollspy. If you like the answer please rate it. :)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
</div>
I have this code:
<a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a>
<div id="tab-customtab"></div>
This opens up the div #tab-customtab but does not scroll to it. Is there a way to scroll to the div onclick?
something like this?
function scrollToId(aid){
var aTag = $("div[id='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
source: https://stackoverflow.com/a/8579673/4356678
Try this, it makes you more reliable and dynamic.
$(document).ready(function() {
$(".menu").on("click",function(event) {
if ($(".toggleMenu").hasClass('active')) {
$(".toggleMenu").click();
}
$('html,body').animate({
scrollTop: $(this.hash).offset().top}, 500);
});
$(".chosen-select").chosen();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav>
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
<li> Forth</li>
</ul>
</nav>
</header>
<section style="height:150px;width:100%;" id="div1">
<h2 style="text-center">First Div</h2>
</section>
<section style="height:150px;width:100%;" id="div2">
<h2 style="text-center">Second Div</h2>
</section>
<section style="height:150px;width:100%;" id="div3">
<h2 style="text-center">Third Div</h2>
</section>
<section style="height:150px;width:100%;" id="div4">
<h2 style="text-center">Forth Div</h2>
</section>