Develop Reference

Jquery smooth scroll doesn't work in fixed div

I want to add smooth scrool my links. But if divs inside fixed div it doesn't work. I tried many scrolling js functions but none of didn't work in my codes. You can see my codes and demo below.
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
var scroll;
if($(window).scrollTop()==0){
scroll = ($target.offset().top) - 160
}else{
scroll = ($target.offset().top) - 60
}
$('html, body').stop().animate({
'scrollTop': scroll
}, 900, 'swing', function () {
//window.location.hash = target;
});
});
});
.content {
height: 100%;
}
#left,
#right {
position: fixed;
height: 100%;
}
#left {
width: 50%;
}
#right {
width: 50%;
right: 0;
background: #efefef;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div id="left">
About
Contact
</div>
<div id="right">
<div id="about">
<h1>About</h1>
<p>xx</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi nihil aspernatur quae suscipit maiores asperiores dolor dicta doloribus, facilis quas, cum. Eveniet, debitis alias quae beatae veritatis expedita assumenda voluptatem, maxime autem sunt vero velit eum, facilis illum magni neque soluta exercitationem. Odio distinctio incidunt ratione fugiat dicta non qui officia, obcaecati, ea cumque iusto quam et, accusantium unde eaque similique in! Eveniet culpa hic illo asperiores possimus itaque dolorem sapiente minima praesentium esse odio, illum beatae, voluptatem at error quo quisquam harum. Aut culpa ipsum soluta et in facere deserunt cum. Aliquam quis voluptatem laborum voluptatibus inventore ut optio, ad, ducimus harum maiores laboriosam ratione temporibus aut, ipsum ullam minima excepturi nisi aspernatur in repellat aperiam. Praesentium ea laborum corporis, voluptates earum tempora et ipsa quibusdam dolores amet nihil autem nisi, explicabo accusantium. Eos fugit aut eveniet eum expedita nihil aliquam ipsum voluptatem minus, nam officiis praesentium neque consectetur a, eius corporis repellat laborum dignissimos doloribus itaque ullam distinctio, dolorem rerum libero cum! Ducimus labore, unde eos nulla modi placeat consequatur aliquid vero in dolore eum, deserunt quas iure sapiente repellat, libero provident beatae necessitatibus asperiores aspernatur sunt mollitia suscipit adipisci! Non cupiditate ea quae, quia? Harum doloremque vitae dicta officia molestias a inventore sequi, minus tenetur perferendis. Odio sit ad nostrum labore, dolorem dolores iusto, recusandae quidem blanditiis? Error modi accusamus ratione repellat quaerat quas asperiores tempora vel ipsum sequi omnis deserunt qui, debitis quod explicabo unde enim necessitatibus nulla eligendi voluptatem beatae veniam! Eligendi quia praesentium iste officia. Eum aliquid, distinctio illo harum nobis, expedita tempore explicabo eius consequuntur a ut reiciendis nostrum amet voluptate officia omnis autem. Ea earum est numquam minus id! Temporibus quae, voluptatum explicabo, facere dolore voluptate blanditiis quod aspernatur consequatur porro. Sit doloribus accusamus veritatis autem totam praesentium, debitis iure, itaque eveniet ipsa amet possimus a recusandae. Aliquam cumque officiis quod hic optio illum, nulla, neque, quae necessitatibus voluptatem fuga tempore, vel harum repellat maiores blanditiis nisi ipsam doloremque a iure atque recusandae iusto commodi. Voluptatibus veritatis fuga asperiores cupiditate nemo impedit nihil vel quis inventore aut doloremque recusandae hic praesentium ipsam, animi dicta, odio nostrum illo velit ut error, labore. Facilis voluptatibus repudiandae laudantium quas. Repellendus aperiam recusandae at. Repellendus ut quas voluptatibus aperiam dolor? Obcaecati, esse doloribus id ad delectus. Natus veniam ipsam quam cum commodi, aperiam. Commodi earum consequuntur nam, suscipit autem, quos dolor impedit laborum assumenda saepe numquam, nesciunt tempore quibusdam magni dignissimos nihil praesentium libero ipsa aliquam doloremque veritatis quas unde laudantium atque! Voluptate similique odio dolores animi modi explicabo aliquid ex atque reiciendis voluptatibus suscipit aspernatur, debitis corrupti eligendi unde sequi iure maxime. Aspernatur iste dolorem nisi beatae tempore ea at rem consectetur, perspiciatis omnis, debitis explicabo eum nulla. Eaque provident magnam sequi, porro minus. Quae dignissimos optio quidem quasi reprehenderit! Repellat optio, sequi iure, libero tempora assumenda cumque eius autem, nesciunt itaque magnam provident dolore atque excepturi. Magnam aliquam quam, minus et ad error, voluptate assumenda esse laboriosam harum laudantium exercitationem optio eaque doloribus fuga, odit illo aspernatur aliquid dolor voluptatem incidunt? Adipisci, voluptatum, maxime! Cum odio aperiam dolor nihil sequi eum provident culpa ex, repellat id aspernatur alias magnam corrupti minima possimus commodi in consequatur mollitia at, ipsam quas officiis saepe! Rerum maiores mollitia placeat ex beatae illum cumque accusantium molestiae fugiat in officiis voluptatum nulla laboriosam molestias totam tenetur nobis amet voluptates iure, vel modi. Dolores blanditiis, provident culpa magni nulla soluta qui nostrum temporibus doloremque est voluptatibus at vitae ab reiciendis magnam optio. Quam repellat a illo quibusdam culpa nihil, tenetur, eius ipsa mollitia aspernatur natus soluta. Consequatur doloribus est, fuga.</p>
</div>
</div>
</div>
JSFiddle

change $('html, body').stop().animate to $('#right').stop().animate
jsfiddle: https://jsfiddle.net/ercanpeker/w6bcevkm/

I would offer a slightly different solution, mainly because the accepted answer has bugs related to its offset calculation that causes multiple clicks of a link to give the incorrect result.
This one also offers more reusable code that allows an offset to the scroll target to be defined on call.
function scrollToElem(target, $container, offset, duration, easing) {
$container.stop().animate({
'scrollTop': target.offsetTop + offset
}, duration, easing);
}
$(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
scrollToElem(
document.querySelector(this.hash),
$('#right'),
0,
900,
'swing'
);
});
});
JSFiddle

Finding element by visible or hidden not works

I am trying to find a element(button) either visible to view or hidden. but not works.
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if((element.scrollTop + button.offsetHeight) > button.offsetTop ){
console.log('on visible');
return;
}
console.log('hidden');
});
}
newfun();
*{
padding:0;
margin:0;
}
.parent{
height:100px;
overflow-y:auto;
border:2px solid red;
}
<div id="parent" class="parent">
will type some info
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates praesentium similique pariatur at. Iste rem ratione veritatis officiis aliquid modi provident asperiores, ex porro quibusdam maiores impedit dolorum sit deserunt!</div>
<div>Et officiis earum, possimus doloribus harum odio aut enim, doloremque, culpa eaque ipsum. Dicta in hic quibusdam autem, excepturi. Unde fugiat nesciunt dolores animi repellendus, exercitationem, magnam iusto incidunt distinctio.</div>
<div>Minus dignissimos similique voluptas cum alias praesentium eos, inventore voluptatum est. Harum officia quo, maxime facere, explicabo ratione, voluptates inventore incidunt numquam cum sunt eos architecto, vero soluta saepe amet?</div>
<div>Enim quaerat ipsam inventore laboriosam odit eum rerum, magni aperiam. Mollitia, ratione, ex. Quidem iusto enim nobis quisquam impedit autem, commodi voluptates quaerat ipsam optio temporibus consequuntur, eos, voluptatibus deleniti.</div>
<div>Atque deserunt facilis consequatur quae eaque accusantium inventore ducimus voluptatem eius animi harum excepturi, reprehenderit earum minus distinctio hic tenetur enim veniam corrupti, blanditiis possimus doloribus qui! Voluptates, consectetur nostrum.</div>
<p>
<button id="button">
Click me
</button>
</p>
</div>
Demo

It happens because you use top border of your parent container to detect button visibility. To fix this you should add your parent height to your parent scroll.
scrollTop returns scroll amount from top border. You can check is button visible inside parent container using next code:
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if(checkVisibility(button, element)){
console.log('on visible');
return;
}
console.log('hidden');
})
}
function checkVisibility(elm, parent) {
var boundingRect = elm.getBoundingClientRect();
var parentHeight = parent.offsetHeight;
return !(boundingRect.bottom < 0 || boundingRect.top - parentHeight >= 0);
}
newfun();

This is what you need. Consider your div offsetHeight which is 104 including borders pixels.
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if(((element.scrollTop + element.offsetHeight + button.offsetHeight) > button.offsetTop)
&& (button.offsetTop + button.offsetHeight) > element.scrollTop
){
console.log('on visible');
return;
}
console.log('hidden');
})
}
newfun();

JS keeps redirecting me to a null page

I have this js script that will make the page fade in when the user enters, and fades out when the user clicks a link to another page. It works, but somehow I have my anchor links within the page and whenever I click the links, it takes me to the anchor and within a few seconds it redirects me to a null page like localhost/website/null
here's the code:
jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click', function(event) {
var thetarget = this.getAttribute('target')
if (thetarget !="_blank" ) {
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function() {
jQuery('body').fadeIn();
}, 1000)

I'm not understanding the problem -- maybe there isn't an issue? Refer to the snippet below?
Meta/Sidenote: SO needs a better way of creating snippets for comments -- this shouldn't be an answer, but there's no better way to supply a SO-generated demo.
jQuery('.container').css('display', 'none');
jQuery(document).ready(function($) {
var $container = $('container').fadeIn();
$('a').on('click', function(e) {
var _target = this.getAttribute('target');
if (_target != "_blank") { // (e.g., null, '_self')
var _href = this.getAttribute('href');
e.preventDefault();
$('.container').fadeOut(function() {
window.location = _href;
});
}
});
});
setTimeout(function() {
jQuery('.container').fadeIn();
}, 1000)
.container {
background: #09c;
padding: 1em;
height: 100%;
width: 100vw;
}
a:nth-child(2n)::after {
content: "\A";
white-space: pre;
}
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
_self (external link)
_self (internal link)
_blank (external link)
_blank (internal link)
No target (external link)
No target (internal link)
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, reprehenderit, nostrum. Tempora totam, iusto, inventore cupiditate hic quam quas explicabo dolore mollitia eius ullam rerum minus placeat nobis in debitis magni non, dolor aut libero
dignissimos fugiat. Sed laboriosam itaque necessitatibus hic excepturi, perferendis, exercitationem cumque incidunt asperiores labore dolor.</p>
<p>Minus velit rerum, reiciendis perspiciatis pariatur accusamus, magni voluptatibus, voluptatem fugit optio libero quidem! Nostrum pariatur eveniet ipsum obcaecati aperiam deleniti hic quam facilis reprehenderit dolor ipsam suscipit, quidem laboriosam
impedit fugiat sit dignissimos delectus qui. Suscipit necessitatibus natus omnis eveniet molestiae nostrum aut culpa, tempora, voluptatibus modi eius nisi.</p>
<p>Illo quo, iure doloremque unde ullam iste. Fuga ullam dicta voluptate, odio sint molestiae expedita sequi, placeat omnis porro. Blanditiis ut, laboriosam nobis necessitatibus esse ipsam, magnam facilis in placeat delectus quidem eos laborum, illum
similique fugiat nesciunt doloremque ratione unde vel fugit excepturi dolor minima, amet tenetur. Tempora, eveniet.</p>
<p>Aliquam ex assumenda eum perspiciatis odio suscipit nemo in delectus. Iste in, ipsam iure deserunt, explicabo ipsum maxime. Praesentium, vitae, quos quia sed doloribus laboriosam. Architecto sapiente totam quisquam esse saepe asperiores provident
voluptatibus aperiam, similique sunt fugit cupiditate beatae aspernatur laborum, eius quas ab tempore consequatur officiis vero! Fugiat.</p>
<p>Explicabo minima necessitatibus soluta odio, sunt saepe aspernatur quasi molestiae cum? Nulla eveniet ad accusantium sed sapiente quod ea soluta repellendus culpa, ut deleniti dolore. Porro amet, quasi dignissimos provident modi nihil rerum quis explicabo,
voluptatem illo assumenda itaque. Maxime sequi asperiores enim tempora maiores dolor. Nihil quidem repudiandae asperiores!</p>
<p>Dicta facere at dolorum ut veritatis recusandae praesentium nesciunt illo, omnis doloremque labore repellendus soluta officia distinctio aperiam pariatur minus quia placeat enim, amet, quae repellat reiciendis nihil magni. Ad expedita dolores cupiditate
debitis dolore? Unde vitae inventore provident reiciendis adipisci dolorum ad ipsa possimus excepturi, mollitia nobis. Perspiciatis, voluptate.</p>
<p>Officia minima nulla delectus neque sapiente in voluptates iste facere dolorum sequi, animi fuga illo enim alias explicabo, culpa? Quaerat nesciunt animi, eius assumenda quidem sunt saepe nam suscipit voluptate eaque, laborum minus expedita nostrum
praesentium iusto eveniet officia ab tempore eos at. Dolores minus qui fugit, temporibus sequi tempora!</p>
<a id="foo" name="foo">ID:foo</a>
</div>
</body>

How can I make my header smaller if i will scroll down the webpage [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have got my header position: fixed; and height: 200px; and green color in the main position up in the website. How can I reduce the height to 100px; if when I scroll down the web page?
I has made some small JSFIDDLE so you can see it. http://fiddle.jshell.net/#&js=ybR4h7OViQ
The header is set up with 200px height. I just want to know what JS/Jquery code do I need to add here so it can go.

Are you looking for something like this?
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 5)
$("header").addClass("small");
else
$("header").removeClass("small");
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding-top: 100px;}
p {margin: 0 0 10px;}
header {height: 100px; line-height: 100px; text-align: center; background-color: #ccf; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s ease;}
header.small {height: 50px; line-height: 50px;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<header>
<h1>Hello</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aliquam fugiat corporis ratione. Eius maiores qui unde aperiam officia, dolorum quo, hic animi harum natus optio adipisci ipsa ratione totam.</p>
<p>Pariatur repellendus repellat, dolores odio reprehenderit provident culpa nostrum molestias optio officia magni impedit iusto? Repellendus fugit est, dicta, non voluptatum similique perspiciatis facilis voluptates magnam. Veritatis iste quis corporis?</p>
<p>Repellat totam deleniti officia sunt amet nisi libero ad, sint quidem, inventore sequi dolorum quae cum suscipit, molestias eum velit quod cupiditate. Soluta doloremque quis laboriosam unde ad laudantium praesentium.</p>
<p>Laborum ab asperiores sequi, placeat expedita. Optio nostrum soluta temporibus numquam repellendus expedita, impedit ducimus reiciendis laudantium minima nobis harum adipisci labore vitae earum magni quo animi facere. Quas, fugit!</p>
<p>At excepturi eius architecto dolorum aliquid. Ex ullam repellendus non id nulla modi quasi numquam, consectetur nam! Cum tempora quisquam, officiis. Atque ipsa culpa saepe, officiis modi error tempora sint!</p>
<p>Ab minus, tempore! Modi nemo praesentium voluptatibus accusamus sit doloremque dignissimos facere illo dolor! Dicta hic consequatur sint voluptatum necessitatibus similique fugit culpa modi eius ab, maiores quam ipsa officia.</p>
<p>In vero minus, dolorum deserunt voluptatibus accusamus, mollitia quasi, sapiente dicta distinctio explicabo cupiditate autem nisi placeat dolores odit harum molestiae aspernatur! Porro, optio vero dolorum architecto cumque incidunt quasi!</p>
<p>Pariatur blanditiis et quod officiis illo iste numquam, temporibus, in neque doloremque. Facere dignissimos exercitationem nisi veritatis possimus vitae debitis quas animi natus excepturi fugit repellat, porro, voluptatum aliquid reiciendis.</p>
<p>Facere, laudantium. Eaque reprehenderit laudantium distinctio quos, in obcaecati fuga. Quia provident, temporibus voluptates, totam delectus nesciunt corrupti optio et voluptatem possimus facere tempore ad quod vel soluta velit itaque?</p>
<p>Quisquam, itaque tenetur accusantium nemo temporibus odit, id qui atque ab magnam sunt voluptas soluta deserunt impedit neque amet nesciunt eaque unde dignissimos. Sequi eligendi, quos consectetur, laborum commodi maxime.</p>
<p>Temporibus et facilis, ipsum aspernatur omnis provident aliquam illum neque laboriosam libero voluptatum voluptates dicta labore ut saepe harum consequuntur eligendi facere quibusdam dolores, ex reiciendis enim aut, impedit! Tempora.</p>
<p>Beatae, ullam, odit. Animi, maiores facere fuga et. Laborum quae sequi veritatis, incidunt dignissimos dolorem, labore, error maxime quam ullam modi fugit accusantium possimus architecto id blanditiis pariatur aperiam ducimus?</p>
<p>Illum magni porro consequatur veritatis earum. Illum delectus, earum quidem error facilis animi ad aperiam temporibus, nesciunt cum nemo fuga quod, assumenda alias ipsum atque. Animi beatae aliquid, voluptatum ratione!</p>
<p>Tempore architecto enim quibusdam, aperiam reprehenderit. Culpa laboriosam commodi ipsum cumque, suscipit cupiditate! Earum repellat totam quo eaque vitae, numquam natus laborum reprehenderit hic, rerum illo, nostrum nobis id. Odio?</p>
<p>In accusamus voluptatum alias doloremque repellat, minima at fugiat commodi praesentium perspiciatis similique quaerat, iste quibusdam, a consectetur ullam modi quod maiores nihil quam velit maxime ad. Ipsum, aut, architecto.</p>

Just do it like this:
var heightFromTop = 50, //Height from top where header will shrink
headerHeight = 100, //height that header will shrink to.
header = document.querySelector(".header"), //Selects .header element
defaultHeight = getComputedStyle(header).height; //Gets the default height of the element
window.onscroll = function() { //Runs function when you scroll window
if (document.documentElement.scrollTop > heightFromTop) header.style.height = headerHeight + "px"; //Checks if the body is scroll down more then heightFromTop
else header.style.height = defaultHeight + "px"; //Otherwise, set it to the default height
}
JSFiddle Demo

Cycling through elements with jQuery

I've got a little script to cycle forward and backward through some items. Here's a simplified pen which shows the same issue: http://codepen.io/2kp/pen/sLoEb
$(document).ready(function(){
var totalslides = $('p').length;
var currentslide;
var newslide;
$('.left').on('click', function() {
currentslide = $('p.active').index()+1;
if (currentslide == 1){
newslide = totalslides;
}
else {
newslide = currentslide-1;
}
$('p.active').removeClass('active');
$('p:nth-child('+newslide+')').addClass('active');
});
$('.right').on('click', function() {
currentslide = $('.slide.active').index()+1;
if (currentslide == totalslides){
newslide = 1;
}
else {
newslide = currentslide+1;
}
$('p.active').removeClass('active');
$('p:nth-child('+newslide+')').addClass('active');
});
});
The left button works fine, but the right button works just sometimes. On the real site, both left and right buttons work fine on everything except iPad. iPhone, Android and desktop are fine.
Really weird. Any help gratefully received.

Use .eq() instead of :nth-child. Also we can drop the need for an if block by using modulus (idea from this SO Answer):
$(function() {
var $slides = $('p.slide');
function transition(step) {
var $activeSlide = $('p.slide.active').removeClass('active');
var nextIndex = ($slides.index($activeSlide) + step) % $slides.length;
$slides.eq(nextIndex).addClass('active');
}
$('.left').on('click', $.proxy(transition, null, -1));
$('.right').on('click', $.proxy(transition, null, 1));
})();
button {
font-size: 32px;
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="left">☜</button> <button class="right">☞</button>
<div class="slides">
<p class="slide active">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias neque necessitatibus, deleniti natus est dolores aut earum maiores ullam quas quis mollitia nemo, tenetur magni. Veniam in porro perspiciatis.</p>
<p class="slide">2: Itaque impedit ratione, eveniet, quisquam voluptate perferendis eum accusantium! Quia mollitia dolor a nulla, tenetur nesciunt ex tempore officia autem modi sit molestiae veniam voluptates vero itaque beatae similique quidem.</p>
<p class="slide">3: Est libero consequuntur ipsum distinctio corporis doloremque sunt iure autem tenetur labore at voluptate quam, repudiandae alias asperiores unde iste. Perspiciatis laborum, culpa sit maxime nostrum consequuntur labore reprehenderit adipisci.</p>
<p class="slide">4: Error eveniet, modi a sunt animi quos accusamus ullam quibusdam earum doloribus, omnis dicta ut. Facilis laboriosam autem libero itaque accusantium explicabo blanditiis veritatis sint nesciunt obcaecati, deleniti! Alias, impedit?</p>
<p class="slide">5: Modi neque harum vero minima nemo, dolor dolorum veritatis fuga obcaecati vitae! Quo commodi temporibus obcaecati rem repudiandae vel assumenda nostrum alias. Debitis non esse culpa officiis eum exercitationem distinctio!</p>
</div>

I'm not sure why. Probably some kind of conflict with other parts of my script, but replacing nth-child() with eq() and adjusting the maths sorted out the issue on the iPad.