Jumping to sections of the page using only Jquery - javascript

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>

Related

How to toggle vertical tabs with vertical text and content using jquery

This code is displaying vertical tabs with vertical text and content. Toggle is not working properly, when I click on second tab, first content is also displaying. Can anyone help me to get the content of individual tabs? Here I have mentioned html, css and javascript code. Is it possible in Jquery? Can anyone mention the details?
<main id="main">
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home
</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<div class="tab-content">
<div id="left" >
<div>
<ul id="tree1" >
<li id="li2">News
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li id="li2">Sites
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('#tree1').treed();
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.2/js/bootstrap.min.js"></script>

You forgot both import of jQuery (JSfiddle console raised that error) and Boostrap classes (tab-pane) and ids (the content of the href of the a tag) on tabs panels.
Here the right code:
jQuery Script from CDN:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Here the right panel code:
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<hr/>
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home-v">Home Tab.</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
I simplified the code inside the Home panel in order not to post a big piece of code, which was not relevant.
Hope this helps!
Working codepen link with full code.

jQuery scrollTop doesn't scroll the first time

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>

Javascript Scroll not working as expected

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>

Scrolling to and Opening a Div Using a onclick

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>

Swing animation to different parts of page

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.

Categories

Resources