Develop Reference

CSS/JavaScript - Scroll snap when user starts scrolling

I recently found this website that uses scroll snapping. I looked into it and found that CSS supports this. However, it looks like snapping happens after the user stops scrolling. The same applies with the answer to this question.
The next thing I tried was using window.scrollTo and react-scroll, but both of these weren't as smooth as the website I've linked as an example since the user could still "fight" the scrolling by scrolling in the other direction.
I want it to scroll snap when the user starts scrolling. How can I do this with CSS or JavaScript?

The developer you were looking at is using this js script if you ant to emulate it exactly https://alvarotrigo.com/fullPage/

If jQuery is an option, that would be the easiest solution with the best browser compatibility. You can use the "wheel" event listener to detect the direction of the scroll, and then use jQuery animate to scroll the window to the appropriate element. I've provided an example based on this GitHub repo: https://github.com/epranka/sections-slider.
(function($) {
var selector = ".section";
var direction;
var $slide;
var offsetTop;
var $slides = $(selector);
var currentSlide = 0;
var isAnimating = false;
var stopAnimation = function() {
setTimeout(function() {
isAnimating = false;
}, 300);
};
var bottomIsReached = function($elem) {
var rect = $elem[0].getBoundingClientRect();
return rect.bottom <= $(window).height();
};
var topIsReached = function($elem) {
var rect = $elem[0].getBoundingClientRect();
return rect.top >= 0;
};
document.addEventListener(
"wheel",
function(event) {
var $currentSlide = $($slides[currentSlide]);
if (isAnimating) {
event.preventDefault();
return;
}
direction = -event.deltaY;
if (direction < 0) {
// next
if (currentSlide + 1 >= $slides.length) {
return;
}
if (!bottomIsReached($currentSlide)) {
return;
}
event.preventDefault();
currentSlide++;
$slide = $($slides[currentSlide]);
offsetTop = $slide.offset().top;
isAnimating = true;
$("html, body").animate({
scrollTop: offsetTop
},
1000,
stopAnimation
);
} else {
// back
if (currentSlide - 1 < 0) {
return;
}
if (!topIsReached($currentSlide)) {
return;
}
event.preventDefault();
currentSlide--;
$slide = $($slides[currentSlide]);
offsetTop = $slide.offset().top;
isAnimating = true;
$("html, body").animate({
scrollTop: offsetTop
},
1000,
stopAnimation
);
}
}, {
passive: false
}
);
})(jQuery);
.section {
position: relative;
display: flex;
height: 100vh;
}
#section1 {
background: blue;
}
#section2 {
background: #ff8c42;
}
#section3 {
background: #6699cc;
}
#section4 {
background: #00b9ae;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>
<div id="section4" class="section"></div>

Get scrollTop to run more than once

How is it possible to get the smooth scroll working more than once (with JQuery:s scrollTop)?
var projectContainer = document.getElementsByClassName('projectContainer')[0];
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
$([document.documentElement, document.body]).animate({
scrollTop: $(".projectContainer").offset().top
}, 2000);
projectContainer.style.background = "orange";
$(window).bind("mousewheel", function() {
$("html, body").stop();
});
} else {
projectContainer.style.background = "white";
}
position = scroll;
});
.top {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">Scroll</div>
<div class="projectContainer">hello</div>
I've tried this but it only works for the first time after running the script.
Thanks in advance!

jQuery page scroll not changing navbar href to active class

I have a one-page website. When I scroll down I want my (fixed) navbar links to change the status to active when reaching the position of that specific div.
I used jQuery but it doesn't work. Here is my code:
// SMOOTH SCROLLING PAGES
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('main-navigation ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
};
Here is my HTML:
<nav id="main-navigation">
<ul>
<li class="active">Home</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</nav>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>
The smooth scrolling works perfectly, but when I scrolling back up from div #d the navbar li active state doesn't change.

Here, i prepare fiddle for you, i hope it what you looking for - http://jsfiddle.net/skyr9999/dpuvcj5w
<div class="content">
<div id="site-main">DIV Home</div>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>
</div>
<nav id="main-navigation">
<ul>
<li><a class="menuitem" href="#site-main">Home</a></li>
<li><a class="menuitem" href="#a">A</a></li>
<li><a class="menuitem" href="#b">B</a></li>
<li><a class="menuitem" href="#c">C</a></li>
<li><a class="menuitem" href="#d">D</a></li>
</ul>
</nav>
js
$(document).ready(function () {
$('a[href^="#site-main"]').addClass('active');
//smoothscroll
$('.menuitem').on('click', function (e) {
e.preventDefault();
// $(document).off("scroll");
var athis = this;
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 800, 'swing', function () {
window.location.hash = target;
$('.menuitem').removeClass('active');
$(athis).addClass('active');
});
});
$(window).scroll(function (event) {
var scrollPos = $(document).scrollTop();
if (scrollPos === 0)
{
$('a[href^="#site-main"]').addClass('active');
return;
}
$('.menuitem').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.menuitem').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
})
});
Because you did not include any css, i improvise a little, but it seems works just fine.
css
#a,#b,#c,#d,#site-main { height: 400px;}
#main-navigation {
position: fixed;
top: 0px;
right:10px;
}
#main-navigation ul li {
display: inline;
}
.active {
background: #f00;
}
Update 1
I update code to match fiddle now it change menu item selection when you scrool to item

You have to loop through with the list items instead and correct the id selector with a # notation:
$('#main-navigation li').each(function () { //<---correct id selector
var currLink = $(this);
var refElement = $(currLink.find('a').attr("href")); //<---find the anchor here
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#main-navigation ul li').removeClass("active"); //<---and here
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});

you can use this cool tiny plugin to achieve this
https://github.com/davist11/jQuery-One-Page-Nav
it will add current class when you are in a specific div or section
Hope this help :)

replace
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
with
$('a').each(function () {
$(this).parent().removeClass('active');
})
$(this).parent().addClass('active');
complete code:
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).parent().removeClass('active');
})
$(this).parent().addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
window.location.hash = target;
});
});
No need of onScroll function

ScroolToTop show and hide based on user's scroll

How can show and hide a dive of scrolltotop.
Condition:
1. when user scrool down to 80 px it will be shown
2.if user clicks on it it it will take user to the top.
3. if a user stay 2 or more seconds in a certain position(it may maby 200px or more or less), the scroolbar also hidden. If he scroll up or down, the scroolbar visible then.
$(document).ready(function () {
$("#scrollup").hide('slow')
$(window).scroll(function (e) {
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
i have done 1 and 2 condition , but how can i implement no 3?

Add setInterval(function(){ $("#scrollup").hide('slow'); }, 2000); and clear it on scroll
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
Demo:-
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
#pagewrap{
height:1000px;
}
#scrollup {
position: fixed;
color: white;
padding: 10px 30px;
background: red;
bottom: 30px;
right: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrap">
<h1>Demo</h1>
<h2>Animated Scroll to Top</h2>
<div id="scrollup">
scroll to top
</div>
</div>

infinite loop for div scroll

I am trying to impliment tweet scroller on http://www.hubspot.com/
which is i guess using tweet-scroller from http://code.divshot.com/tweetscroller/
but this link is broken as demo is not working.
i looked for alternative.
I found http://jsfiddle.net/doktormolle/4c5tt/
HTML:
<ul class="slide">
<li><img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/></li>
<li><img src="http://www.google.com/logos/2010/germany10-hp.gif"/></li>
<li><img src="http://www.google.com/logos/stpatricks_02.gif"/></li>
</ul>
CSS:
ul.slide{margin:0;
padding:0;
height:80px;
list-style-type:none;}
ul.slide li{float:left;
list-style-type:none;}
ul.slide img{border:1px solid silver;
height:80px;}
JS:
//Plugin start
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var _this = $(this);
_this.data('marquee', options);
var _li = $('>li', _this);
_this.wrap('<div class="slide_container"></div>')
.height(_this.height())
.hover(function () {
if ($(this).data('marquee').stop) {
$(this).stop(true, false);
}
},
function () {
if ($(this).data('marquee').stop) {
$(this).marquee('slide');
}
})
.parent()
.css({
position: 'relative',
overflow: 'hidden',
'height': $('>li', _this).height()
})
.find('>ul')
.css({
width: screen.width * 2,
position: 'absolute'
});
for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
_this.append(_li.clone());
}
_this.marquee('slide');
});
},
slide: function () {
var $this = this;
$this.animate({
'left': $('>li', $this).width() * -1
},
$this.data('marquee').duration,
'swing',
function () {
$this.css('left', 0).append($('>li:first', $this));
$this.delay($this.data('marquee').delay).marquee('slide');
}
);
}
};
$.fn.marquee = function (m) {
var settings = {
'delay': 2000,
'duration': 900,
'stop': true
};
if (typeof m === 'object' || !m) {
if (m) {
$.extend(settings, m);
}
return methods.init.apply(this, [settings]);
} else {
return methods[m].apply(this);
}
};
})(jQuery);
//Plugin end
//call
$(document).ready(
function () {
$('.slide').marquee({
delay: 3000
});
}
);
which works fine with little modification i did
http://jsfiddle.net/3pZwR/1/
only problem is it stops after each div is scrolled.
I want it to be infinite scroll like effect without getting it stopped. like on hubspot.

You should use another JQuery Easing method instead of "swing".
Have a look at the Easings on the JQuery website: http://api.jqueryui.com/easings/