Develop Reference

click button scroll to specific div

I have a page that has a fixed menu and content box(div).
When click the menu, content box scroll to specific div.
So far so good.
This is the sample here.
https://jsfiddle.net/ezrinn/8cdjsmb9/11/
The problem is when I wrap this whole div and, make them as show/hide toggle button, the scroll is not working.
This is the sample that not working.
https://jsfiddle.net/ezrinn/8cdjsmb9/10/
Also here is the snippet
$('.btn').click(function() {
$(".wrap").toggleClass('on');
});
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
$(document).ready(function() {
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
$('a').bind('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").scroll(function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a> </li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>a
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>
What Do I need to fix the code? please help.

When you calculate your offset, the div is hidden with display: none. This results in the offsets being set/calculated to zero.
Here's a quick fix I threw together: https://jsfiddle.net/hrb58zae/
Basically, moved the logic to determine offset after clicking show/hide.
var setOffset = null;
...
if (!setOffset) {
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
setOffset = true;
}

In your CSS, instead of using display: none and display: block, try using visible instead:
.wrap { visibility:hidden;}
.wrap.on { visibility:visible;}
This will hide the element without affecting the layout.
Updated fiddle: https://jsfiddle.net/a5u683es/

The problem was you are trying to update id_offset_map when content was hidden. When you use 'display:none' prop you won't get dimensions for that element and so its not working.
I updated the logic please check the fiddle https://jsfiddle.net/qfrsmnh5/
var id_offset_map = {};
var div_parent_class_name = "wrap_scroll";
var divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
function updateOffsets(){
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
$(document).ready(function() {
$('.btn').click(function() {
$(".wrap").toggleClass('on');
if($(".wrap").hasClass("on")){
updateOffsets();
}
});
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").on('scroll',function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red;
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll;
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>

works perfectly, it's just that when you use display: none you can not do the offsetTop calculations because in fact the element is not rendered, I'm not sure if all the values ​​give 0 or undefined, I guess undefined, a solution is always calculate Positions using a function:
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
function calcTops(){
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
https://jsfiddle.net/561oe7rb/1/
is not the optimal way, but it is to give you an idea. Sorry for my English.

Just Checkout This Working page I have designed
jQuery(document).on('scroll', function(){
onScroll();
});
jQuery(document).ready(function($) {
div_slider();
showhide();
});
/*show hide content*/
function showhide(){
$('.toggle-wrapper button').on('click', function(){
$('.wrapper').toggle();
// div_slider();
})
}
/*scrolling page on header elements click*/
function div_slider(){
$('ul li a').on('click', function(e){
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate({
scrollTop: attrval.offset().top
}, 1000)
});
}
/*adding active class on header elements on page scroll*/
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('ul li a').each(function () {
var scroll_link = $(this);
var ref_scroll_Link = $(scroll_link.attr("href"));
if (ref_scroll_Link.position().top <= scrollPosition && ref_scroll_Link.position().top + ref_scroll_Link.height() > scrollPosition) {
$('ul li a').removeClass("active");
scroll_link.addClass("active");
}
else{
scroll_link.removeClass("active");
}
});
}
body {
margin: 0;
}
.toggle-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ccd2cc;
text-align: center;
}
.toggle-wrapper button {
background-color: #ED4C67;
color: #ffffff;
padding: 10px 20px;
border: 0;
cursor: pointer;
border-radius: 5px;
}
.toggle-wrapper button:active{
background-color: #B53471;
}
header {
background-color: #6C5CE7;
position: fixed;
top: 36px;
z-index: 99;
left: 0;
right: 0;
}
header ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
ul li {
flex: 1 100%;
display: flex;
justify-content: center;
}
.wrapper {
margin-top: 36px;
}
header a {
color: #ffffff;
padding: 15px;
display: block;
text-decoration: navajowhite;
text-transform: uppercase;
width: 100%;
text-align: center;
}
header a.active {
color: #000000;
background-color: #ffffff;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section.section1 {
background-color: #FFEAA7;
}
section.section2{
background-color:#FAB1A0;
}
section.section3{
background-color:#7F8C8D;
}
section.section4{
background-color:#4CD137;
}
section.section5{
background-color:#A3CB38;
}
section.section6{
background-color:#70A1FF;
}
section.section7{
background-color:#079992;
}
<div class="toggle-wrapper">
<button>Toggle</button>
</div>
<div class="wrapper" style="display: none;">
<header>
<ul>
<li><a class="active" href="#one">one</a></li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
</header>
<section class="section1" id="one">SECTION ONE</section>
<section class="section2" id="two">SECTION TWO</section>
<section class="section3" id="three">SECTION THREE</section>
<section class="section4" id="four">SECTION FOUR</section>
<section class="section5" id="five">SECTION FIVE</section>
<section class="section6" id="six">SECTION SIX</section>
<section class="section7" id="seven">SECTION SEVEN</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to scroll to next div using Javascript?

So I'm making a website with a lot of Divs that take 100% height.
And I want to make a button so when it's clicked to smoothly scroll to next div.
I've coded something so when its clicked, it scrolls to specific div.
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top},
'slow');
});
body{
margin: 0;
height: 100%;
}
.p1{
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2{
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3{
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin{
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>

To make this work you need to identify the currently displayed div. For that you can apply a class to the element which is currently shown. Then you can use next() to traverse through them all.
Also note in the below example the addition of a common class on all elements, .p, in order to DRY up the CSS and make DOM traversal easier.
$(".next").click(function() {
var $target = $('.p.active').next('.p');
if ($target.length == 0)
$target = $('.p:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
body {
margin: 0;
height: 100%;
}
.p {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
<button class="next">NEXT</button>
</div>

Use same class name for container.Start with first element.Each time click target the next scroller element
var f = $('.p1');
var nxt = f;
$(".next").click(function() {
if (nxt.next('.scroller').length > 0) {
nxt = nxt.next('.scroller');
} else {
nxt = f;
}
$('html,body').animate({
scrollTop: nxt.offset().top
},
'slow');
});
body {
margin: 0;
height: 100%;
}
.p1 {
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2 {
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3 {
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">
</div>
<div class="p2 scroller">
</div>
<div class="p3 scroller">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>

Here is a basic version that moves forward and wraps around to the beginning when it reaches the last slide. We store currSlide outside of the loop and increment the number internally in the function.
For convenience, I added a slide class to each slide which allows me to:
easily count the length of the slides
condense the CSS
let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
$('html,body').animate({
scrollTop: $(`.p${currSlide}`).offset().top
},
'slow');
});
body {
margin: 0;
height: 100%;
}
/* Less repetition */
.slide {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>
<div class="admin">
<button class="next">NEXT</button>
</div>
jsFiddle
Bonus edit:
In case you're interested in adding a previous button at some point…
let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
function moveSlide() {
currSlide = $(this).hasClass("next") ? ++currSlide : --currSlide;
if (currSlide < 1) {
currSlide = SLIDE_LENGTH;
}
if (currSlide > SLIDE_LENGTH) {
currSlide = 1;
}
$('html,body').animate({
scrollTop: $(`.p${currSlide}`).offset().top
},
'slow');
}
$(".prev, .next").on("click", moveSlide);
body {
margin: 0;
height: 100%;
}
/* Less repetition */
.slide {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>
<div class="admin">
<button class="prev">PREVIOUS</button>
<button class="next">NEXT</button>
</div>
jsFiddle

Since your question asks "How-to in Javascript", I will answer the question in a few lines of vanilla JS:
var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
var topPos = document.getElementsByClassName('page')[p++].offsetTop;
container.scrollTo({top: topPos, behavior: 'smooth'});
}
in the above example, page is the class name you assign to your divs you want to scroll to, such as:
<div id="container">
<div class="page p1"></div>
<div class="page p2"></div>
<div class="page p3"></div>
</div>
Since you want to scroll the entire browser window, you just replace
container.scrollTo({top: topPos, behavior: 'smooth'});
with
window.scrollTo({top: topPos, behavior: 'smooth'});
like so:
var p = 1;
var nextPage = function() {
var topPos = document.getElementsByClassName('page')[p++].offsetTop;
window.scrollTo({top: topPos, behavior: 'smooth'});
}
You can subtract or add the number of pixels you want to offset the topPos if it's not in the right position

Jquery How to position:fixed an element until the end of a certain div of page

I have an element which I only want to be position: fixed until the end of a certain div. I was able make work somehow but still I can't the positioning work 100% smooth, so maybe you can help me out?
$(window).on("scroll", function() {
var scrollTop = $(this).scrollTop();
var containerOffset = $(".content").offset().top;
var containerHeight = $(".content").height();
var f1 = parseInt(containerHeight);
var f2 = parseInt(containerOffset);
var sum = f1 + f2;
if (scrollTop > sum - 240) {
$(".item")
.css("position", "relative")
.css("top", f1 + "px")
} else {
$(".item")
.css("position", "fixed")
.css("top", "20px");
}
});
.content {
height: 1000px;
border: 1px solid red;
background: grey;
}
.item {
position: fixed;
top: 20px;
height: 40px;
background: #fff;
width: 100%;
}
.another {
background: orange;
height: 400px;
}
.more {
background: darkblue;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<div class="item">
scroll only until end of grey CONTENT DIV
</div>
</div>
<div class="another">
<h1>Another div</h1>
</div>
<div class="more">
<h1>More content</h1>
</div>
</div>

Add this css to your html
div.sticky_top {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 20px;
}
and add sticky_top class to your item div - no need for javascript or jquery
<div class="item sticky_top">
scroll only until end of grey CONTENT DIV
</div>
https://codepen.io/anon/pen/bxZaPd

You can tweak when it starts to scroll by adjusting
if (scrollTop > sum - 240) {
it's not clear where 240 came from, but match this with your .item top attribute to give
if (scrollTop > sum - 20) {
and it gives what (it looks like) you're after
$(window).on("scroll", function() {
var scrollTop = $(this).scrollTop();
var containerOffset = $(".content").offset().top;
var containerHeight = $(".content").height();
var f1 = parseInt(containerHeight);
var f2 = parseInt(containerOffset);
var sum = f1 + f2;
if (scrollTop > sum - 20) {
$(".item")
.css("position", "relative")
.css("top", f1 + "px")
} else {
$(".item")
.css("position", "fixed")
.css("top", "20px");
}
});
.content {
height: 1000px;
border: 1px solid red;
background: grey;
}
.item {
position: fixed;
top: 20px;
height: 40px;
background: #fff;
width: 100%;
}
.another {
background: orange;
height: 400px;
}
.more {
background: darkblue;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<div class="item">
scroll only until end of grey CONTENT DIV
</div>
</div>
<div class="another">
<h1>Another div</h1>
</div>
<div class="more">
<h1>More content</h1>
</div>
</div>
Updated fiddle: https://jsfiddle.net/pb0Ljtn4/20/

How to prevent the child div hiding during animation.? [duplicate]

This question already has answers here:
Div within Div hides when outer div animates
(2 answers)
Closed 6 years ago.
I am dynamically changing the width and height of the div. My problem is, the child div is hidden during animation how to prevent is.? I tried, but couldn't resolve the problem. I added the fiddle as follow JS fiddle
HTML
<div class="slide">
<div id="handle"> </div>
</div>
<button onclick="cl()" >
Cli
</button>
Javascript
var wid = 100;
var lft = 50;
cl = function()
{
$(".slide").animate({width:wid+"px", left:lft+"px"}, {duration: 500})
wid += 50;
lft +=50;
}

Include overflow:visible!important; in parent css. Here is the demo: http://jsfiddle.net/MRkhu/11/
CSS:
body
{
background:pink;
}
.slide {
position: relative;
height: 100px;
width: 250px;
margin-top: 100px;
background:#2a2a2a;
overflow:visible!important;
}
#handle {
position: absolute;
height: 20px;
width: 50px;
margin-top:-20px;
background:blue;
z-index:1;
}
HTML:
<div class="slide">
<div id="handle" class="child"> </div>
</div>
<button onclick="cl()" >
Click
</button>
JS:
var wid = 100;
var lft = 50;
cl = function()
{
$(".slide").animate({width:wid+"px", left:lft+"px"}, {duration: 500})
wid += 50;
lft +=50;
}

Use CSS transition instead of jQuery animate:
var wid = 100;
var lft = 50;
$('button').on('click', function() {
$(".slide").css({
width: wid + "px",
left: lft + "px"
});
wid += 50;
lft += 50;
});
body {
background: pink;
}
.slide {
position: relative;
height: 100px;
width: 250px;
left: 50px;
margin-top: 100px;
background: #2a2a2a;
transition: all 500ms;
}
#handle {
position: absolute;
height: 20px;
width: 50px;
margin-top: -20px;
background: blue;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<div id="handle"></div>
</div>
<button>
Cli
</button>

Jquery move to other div ( animate )

I have 2 divs:
CSS
#home {
width: 1280px;
height: 1000px;
background: #000;
}
.step1 {
position: absolute;
margin-top: 100px;
margin-left: 500px;
}
.step1 a{
background: #AAF75A;
width: 100%;
line-height: 55px;
padding: 14px 49px;
text-decoration: none;
font-family: tahoma;
font-size: 20px;
}
#about {
position: absolute;
margin-left: 3000px;
width: 1280px;
height: 1000px;
background: #000;
}
HTML
<div id="home">
<article>
<div class="step1"><a class="move" href="#about">Let's go</a></div>
</article>
</div>
<div id="about">
<article>
<div class="step1"><a class="move" href="#home">Next !?</a></div>
</article>
</div>
and I want move from div id="home" to div id="about"
I have this
JS
$(function($){
$('a.move').click(function() {
var $this = $(this),
_href = $this.attr('href'),
dest = $(_href).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: dest}, 400 );
return false;
});
});
but it just goes down ... it doesn't move to the about div

You have to scroll to the left as well. Like this:
$(function ($) {
$('a.move').click(function () {
var $this = $(this),
_href = $this.attr('href'),
destX = $(_href).offset().top;
destY = $(_href).offset().left;
$('body').animate({
scrollTop: destX,
scrollLeft: destY
}, 400);
return false;
});
});
DEMO