$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '10%'
}).hide()
$("#map").animate({
width: '89%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '29%'
}).show()
$("#map").animate({
width: '70%'
});
$(this).data('name', 'show')
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#map {
width: 80%;
height: 80%;
float: left;
border: 1px solid;
}
#sidebar {
width: 19%;
height: 80%;
float: left;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>
I am a beginner in angularjs, jquery and css. I want to create three div with toggle side by side
Please help me how to do that in angularjs.
In normal mode Example:-
It will be like this.
If I expand center div it needs to be like this Example:-
If I expand last div it needs to be like this Example:-
Thanks..
Try this. All the div can be expanded in any order. To switch back into normal position, click on the expanded div again.
Width in compressed and expanded states are expressed in percentage and you can change them in the css, according to your requirement. Also I added transition property for smooth functioning.
Here's a pen.
$("a.expansion-btn").click(function (){
classes = this.className;
var divNumber = classes.slice(-1);
var toGetId = "#div-"+divNumber;
if ($(toGetId).hasClass("expanded-div")){
$(".normal-div").removeClass("compressed-div expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
background-color:green;
}
#div-2{
background-color:red;
}
#div-3{
background-color:blue;
}
a.expansion-btn{
position:absolute;
top:10px;
right:10px;
font-weight:bold;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="normal-div" id="div-1">
<a class="expansion-btn exp-1">click</a>
</div>
<div class="normal-div" id="div-2">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="normal-div" id="div-3">
<a class="expansion-btn exp-3">click</a>
</div>
</div>
If you just want to toggle between divs then do something like this.
// varible for holding div index
var i = 0,
// cache divs
$div = $('.div');;
// bind click event handler
$('.toggle').click(function() {
$div
// remove both class from all elements
.removeClass('active nonactive')
// get element by index
.eq(i)
// add active class
.addClass('active')
// get siblings
.siblings()
// add nonactive class
.addClass('nonactive');
// update index
i = ++i % $div.length;
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
Or if you want to toggle when clicked a button inside the div then do something like this.
$('.toggle').click(function() {
$(this)
// get div
.parent()
// remove nonactive class from clicked element
.removeClass('nonactive')
// toggle active class
.toggleClass('active')
// get sibling divs
.siblings()
// remove active class from siblings
.removeClass('active')
// toggle nonactive class based on the clicked element
.toggleClass('nonactive', $(this).parent().is('.active'));
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.div,
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
</div>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="maincont">
<div id="map" class="active">MAP</div>
<div id="sidebar" class="inactive">SIDEBAR</div>
<div id="sidebar1" class="inactive">SIDEBAR1</div>
</div>
script:
$(document).ready(function () {
$("#toggle").click(function () {
var $div = $('#maincont').find(".active");
$div.removeClass('active').addClass("inactive").next().addClass("active");
$('#maincont').find(".inactive").animate({
width: '10%'
})
$('#maincont').find(".active").animate({
width: '79%'
});
});
});
css.
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 100px;
float: left;
border: 1px solid;
}
#map {
height: 80%;
float: left;
border: 1px solid;
}
.active{
width:78%;
float: left;
height: 100px;
}
.inactive{
width:10%;
float: left;
border: 1px solid;
height: 100px;
}
#sidebar {
height: 80%;
float: left;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
fiddle link
Since you tagged your question with angularjs, here is a simple solution with no fancy CSS:
Suppose you have some array of objects that describe the panels/divs in the controller, e.g.
$scope.panels = [{
title: "One",
expanded: true
}, {
title: "Two"
}, {
title: "Three"
}];
The expanded flag just track which panel is actually expanded. By default the first one.
Then when you click on a panel, this function set the flag to the selected panel:
$scope.expandPanel = function(panel) {
$scope.panels.forEach(p => p.expanded = false);
panel.expanded = true;
}
And you display all that in a ng-repeat loop where the key thing is to set dynamically the class depending on the expanded flag with ng-class:
<div class="panel"
ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}"
ng-repeat="panel in panels" ng-click="expandPanel(panel)">
<span>{{panel.title}}</span>
</div>
See it live with this plunker.
Note: .panel, .expanded and .reduced classes are define in the plunker css file.
Related
I have three inline-block divs on my page (see JSFiddle):
Div #one contains a button 'Show' and is absolutely positioned so that it overlaps the div #two. When 'Show' is clicked, div #two slides out from under #one using translateX, like so:
When this happens, I would like to push div #three down so that it appears just below div #two, like so:
I'm not sure how to go about achieving this using pure CSS that doesn't involve moving #three along the Y-axis using #three { transform: translateY(...) }. I was wondering if translateX is the wrong approach here since it does not disturb the position of neighbouring elements, but I don't know what to use in its place.
As I have already stated in the comment section: It really depends on what your final goal is and what content you put in your divs - how everything is structured.
I feel like this is more of a XY-problem. I.e. the design-choice demands for a special case/solution that could be solved in another way so that the "hacky" solution does not have to exist in the first place.
Nevertheless, since you have asked for it I give you a solution for this specific problem:
const container = document.querySelector('.container');
const slide = document.getElementById('show');
const done = document.getElementById('hide');
const two = document.getElementById('two');
const right = document.querySelector('.right');
show.addEventListener('click', function() {
two.classList.add('show');
right.classList.add('shift');
});
hide.addEventListener('click', function() {
two.classList.remove('show');
setTimeout(function() {
right.classList.remove('shift');
}, 1000)
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
transform: translateX(0);
}
.right.shift {
clear: left;
display: block;
float: none;
transform: translateX(100px);
}
#one,
#two {
height: 100%;
}
#one {
background-color: lightblue;
position: absolute;
z-index: 1;
}
#two {
background-color: yellow;
transform: translateX(0);
transition: transform 1s;
}
#two.show {
transform: translateX(100%);
}
<div class="left">
<div id="one">
Click 'Show' to show panel 2
<button type='button' id='show'>Show</button>
</div>
<div id="two">
Click 'Hide' to hide panel 2
<button type='button' id='hide'>Hide</button>
</div>
</div>
<div class="right">Some other content</div>
Alternative
You could implement a spoiler section that you can toggle to display more information if it is desired.
const spoilerBtn = document.getElementById('spoiler-btn');
const spoiler = document.getElementById('spoiler');
spoilerBtn.addEventListener('click', function() {
spoiler.classList.toggle('show');
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
}
#spoiler {
background-color: tomato;
display: none;
}
#spoiler.show {
display: block;
}
<div class="left">Aside text here</div>
<div class="right">
Toggleable section: <button id="spoiler-btn">toggle</button>
<div id="spoiler">This content can be toggled</div>
<p>Some other content</p>
</div>
I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?
I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.
Any ideas?
$(document).on("click", ".duplicate", function() {
var $wrapper = $('.wrapper .inner');
$wrapper.find('.color').each(function() {
$wrapper.append($(this).clone());
});
});
.wrapper {
width: 75%;
margin: 12px auto;
height: 26px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
.wrapper .color {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
</div>
<button class='duplicate'>
Duplicate
</button>
In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.
Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.
But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...
I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:
.wrapper {
width: 75%;
margin: 12px auto;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 25px;
display: flex;
border-radius: 6px;
overflow: hidden;
}
.wrapper .color {
width: 100%;
height: 100%;
}
.new {
margin-top:5px;
height:25px;
border-radius: 6px;
background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
background-size:100% 100%;
animation:change 5s linear infinite alternate;
}
#keyframes change {
from {
background-position:0 0;
}
to {
background-position:-1000px 0;
}
}
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
<div class="new"></div>
</div>
This question is related to one that i have already created transition-in-div . I didnot get answer for my next issue there so i decided to create new question.
I have four boxes and i want the transition effect in all four boxes.
What i want is whenever i click on any box, the width of that box must increase from its side to the left and right to fit the full width. Right now it only fills some portion of width.
My Code is
<html>
<head>
<title>Transition</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 25% 75%;
}
#third {
background-color: aqua;
transform-origin: center center;
}
#fourth {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(4);
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
<div id="fourth" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
});
</script>
Jsfiddle
There's a small mathematical error, you are scaling each div to 4x when their size is 20% so their new size is now 80% instead of the full 100% width.
Please consider the following fiddle: https://jsfiddle.net/m157u2yw/7/
For previewing purposes I've made it so if you click on an expanded box it resets back so you can quickly play with it.
I'm using width instead of scale as it will be useful in case these squares actually have some content inside (scaling would distort it).
I'm also adding another class .scale-down to the not-clicked divs to make sure they also animate out leaving the full space to the expanded one.
Just tweak around your CSS a lil bit:
Since your .box width is 20%, your scaleX() is 5,
Then just go ahead and fix your Transform-origins so it covers out correctly:
https://jsfiddle.net/m157u2yw/8/
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 33.33%;
}
#third {
background-color: aqua;
transform-origin: 66.66%;
}
#fourth {
background-color: blue;
transform-origin: 100%;
}
.scale {
transform: scaleX(5);
}
Why not put the boxes in containers and animate the width, something like this:
https://jsfiddle.net/pt1vk0c1/
<div class="container">
<div id="first" class="box-container">
<div class="box"> </div>
</div>
<div id="second" class="box-container">
<div class="box"> </div>
</div>
<div id="third" class="box-container">
<div class="box"> </div>
</div>
<div id="fourth" class="box-container">
<div class="box"> </div>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.box-container {
width:25%;
height: 200px;
}
.box {
width:80%;
height: 200px;
transition: width .5s;
transform-origin: 0 0;
}
#first .box {
background-color: red;
}
#second .box {
background-color: green;
transform-origin: 25% 75%;
}
#third .box {
background-color: aqua;
transform-origin: center center;
}
#fourth .box {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
width:100%;
}
Here's a solution that will work regardless of the number of boxes or their width. Better to avoid any magic numbers if possible.
Transition width instead of transform. You won't need any transform origins and it will work with any number of boxes regardless of the box size.
To make the width of the other boxes 0. You can add a class to the container.
Than use
.container.open .box:not(.scale) {
width: 0;
}
to set the width of any box without the class .scale to 0
http://codepen.io/flurrd/pen/xqmwLN
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 20%;
height: 200px;
transition: width .5s;
background-color: tomato;
}
.box:nth-child(odd) {
background-color: aquamarine;
}
.scale {
width: 100%;
}
.container.open .box:not(.scale) {
width: 0;
}
JS
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).toggleClass('scale');
$(".container").toggleClass('open')
});
I'm trying to get a bunch of navs to stack on top of one another as you scroll down the page, until the entire page is filled. For some reason, on the third nav, (nav-mid-2), when i try an set the position to fixed it scrolls back up. Confused, and may just need another pair of eyes to check my logic. If there's a better way to do this, let me know.
$(document).ready(function(){
$(window).scroll(function(){
fadeHead();
addNav();
});
});
function addNav() {
var scrollVal = $(window).scrollTop();
console.log(scrollVal)
if(scrollVal < 756) {
$('.nav-mid-1').css({'position': 'relative', 'margin-top': '500px'});
} else if(scrollVal < 1696) {
$('.nav-mid-2').css({'position': 'relative','margin-top': '1500px'});
$('.nav-mid-1').css({'position': 'fixed', 'margin-top': '-256px'});
} else if (scrollVal < 2000){
$('.nav-mid-3').css({'position': 'relative','margin-top': '1500px'})
$('.nav-mid-2').css({'position': 'fixed', 'margin-top': '1478px'});
console.log('here')
}
}
function fadeHead() {
window_scroll = $(this).scrollTop();
$('.head-fade').css({
'opacity' : 1 - (window_scroll/300 )
})}
.main-background {
background-color: #bdc3c7;
width: 100%;
height: 100%;
position: fixed;
}
.h100 {
font-size: 3px;
}
.nav-mid-1 {
margin-top: 500px;
width: 100%;
height: 60px;
background-color: #3498db;
border: 1px solid #3498db;
}
.nav-mid-2 {
width: 100%;
height: 60px;
background-color: #f1c40f;
border: 1px solid #f1c40f;
}
.nav-mid-3 {
margin-top: 600px;
width: 100%;
height: 60px;
background-color: #ecf0f1;
border: 1px solid #ecf0f1;
}
.transition {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-background"></div>
<div class="top-nav">
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
</div>
<br>
<br>
<br>
<br>
<div class="container">
<div class="col-md-6">
<div class="head-fade">
<h1>Alo</h1>
<h2>How's it goin</h2>
<h3>Science.</h3>
<h4>Nature Man.</h4>
<h5>Linguist.</h5>
<div class='h100'>Too Small.</div>
</div>
</div>
</div>
<div class="nav-mid-1">
<h1>Welcome</h1>
</div>
<div class="nav-mid-2">
<h1>To</h1>
</div>
<div class='nav-mid-3'>
<h1>My</h1>
</div>
<div class='nav-mid-4'>
<h1>My</h1>
</div>
The moment you assign a fixed position to an element it is removed from the flow of the page. Thus reducing the length of your page and the $(window).scrolltop value. This is where your code gets stuck and cannot run for the higher $(window).scrolltop values.
I've got this issue that i can't resolve myself.
I've got css tabs like in this site: http://www.sitepoint.com/css3-tabs-using-target-selector/
but i've got a fixed menu in the top of the page. So, when i click in one tab, the html navigate to the anchor that is under this menu and the content jump to top.
I want to scroll the content on top of the page, I've searched a lot, tried `$('body').scrollTop(0); what they said in this answer: Scroll to the top of the page using JavaScript/jQuery?
but nothing work. This is my code, HTML:
<body class="centered">
<div id="main-container">
<!-- header -->
<div class="col_1_of_1 blue header">
<div class="col_1_of_5 menu-icon">
<img src="img/menu.png">
</div>
<div class="col_3_of_5">
<p class="main_title" id="headerTitle"></p>
</div>
<div class="col_1_of_5 img-icon">
<img src="*">
</div>
</div>
<!-- body -->
<div class="body" id="list">
<article class='tabs'>
<section id='tab1'>
<h2><a href='#tab1' id='sayit'>Person1</a></h2>
<div class='col_1_of_1'>
<img src='img/bike/img.png'>
</div>
<div class='col_1_of_1'>
<p class='fausto_title'>dscdsvdvds</p>
<p class='fausto_text'>vdlisvd shvgldk sgvds gvgsd kjbvds ds uidshiu diui guig uig uig g g gl ffyolg f f h hj lhfh ff yfyufolyf uhyf <p>
</div>
</section>
<section id='tab2'>
<h2><a href='#tab2'>John</a></h2>
<div class='col_1_of_1'>
<img src='img/moto/img2.png'>
</div>
<div class='col_1_of_1'>
<p class='fausto_title'>dcdsdvdvds </p>
<p class='fausto_text'>dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg <p>
</div>
</section>
</article>
</div> <!-- end body -->
</div>
CSS:
tabs.css
/* --- container's width --- */
article.tabs
{
position: relative;
display: block;
width: 100%;
}
article.tabs section
{
position: absolute;
top: 1.8em;
left: 0;
height: 12em;
background-color: #ddd;
z-index: 0;
width: 100%;
}
article.tabs section .table {
display: none;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 33%;
height: 1.8em;
top: -1.8em;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-top: 1px solid #ddd;
}
article.tabs section:nth-child(2) h2
{
left: 33%;
}
article.tabs section:nth-child(3) h2
{
left: 66%;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
/* --- active section --- */
article.tabs section:target,
article.tabs section:target h2
{
background-color: #fff;
z-index: 2;
}
article.tabs section:target {
width: 100%;
position: absolute;
top: 1.8em;
left: 0;
height: 12em;
}
article.tabs section:target h2 {
width: 33%;
border-right: 1px solid rgb(27,47,105);
border-left: 1px solid rgb(27,47,105);
border-top: 1px solid rgb(27,47,105);
color: rgb(27,47,105);
}
article.tabs section:target .table{
display: block;
}
/* --- transition effect --- */
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
menu.css:
.menu-icon {
padding-top: 9% !important;
}
.menu-icon img {
width: 40%;
}
.header {
position: fixed;
height: 64px;
top: 0;
z-index: 1000;
}
.header div {
float: left;
padding-top: 8%;
}
Thanks in advice for any help!
EDIT:
This is a phonegap application and i'm compling in iOS just now. It seems like the command scrollTop isn't recognize.
I'm using zepto.js, a jQuery like library but much faster.
EDIT 2:
Zepto.js / jQuery:
function clickButton()
{
document.getElementById('sayit').click();
return true;
}
$(function() {
//..other code (nothing to do with tabs)
//simulate the first click on a tab
clickButton();
$('a').on('click', function(event){
var anchor = $(this);
alert($(anchor.attr('href')).offset().top);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 100);
event.preventDefault();
});
});
Add the class .tab to your tab links.
<h2><a href='#tab1' id='sayit' class='tab'>Person1</a></h2>
Include jQuery in the <head> of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Bind a click event to tabs that scrolls the page to the top:
$('.tab').click(function(event) {
event.preventDefault(); //Prevent the link from jumping.
$('html,body').animate({scrollTop:0}, 400); //Scroll to top
});
Try this :
JS :
//To scroll top of the Tab
$(function() {
$('a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
event.preventDefault();
});
});
HTML :
<div class="col_1_of_5 img-icon">
<img src="*" alt="TOP"/>
</div>
Also, I added Anchor tag over the image which shows the Top arrow.
DEMO HERE
Kindly reply if your are able to figure it out.