For example im trying to make a scroll button that would scroll down multiple divs.
This is some example code of what i mean.
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
I know how to make the button scroll too just one div but i cant figure out how to make the button first scroll to 1 then 2 then 3 and etc.
Here is the code for the button
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
Try it:
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>
To achieve this you can set a class on the current active element, then use next() to find the element to scroll to the next time the button is clicked. Once you reach the end of the elements you want to scroll through you can go back to the start. Note that I added a common content class to the div elements to make this more reliable. Try this:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
var $target = $('.content.active').next('.content');
if ($target.length == 0)
$target = $('.content:first');
$('.active').removeClass('active');
$target.addClass('active');
$('html, body').animate({
scrollTop: $target.offset().top
}, 500, 'linear');
});
});
.content {
height: 250px;
}
#scrolldownButton {
position: fixed;
top: 20px;
right: 50px;
}
.active {
background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="content active">1</div>
<div id="2" class="content">2</div>
<div id="3" class="content">3</div>
<div id="4" class="content">4</div>
<div id="5" class="content">5</div>
<section id="scrolldownButton" class="button">
Scroll
</section>
Related
After a long research I found a solution to add a custom scrollbar to a DIV element.
It's called SimpleBar. Docs can be found here.
The HTML structure and JS code is pretty simple:
Working demo
<div class="gallery" data-simplebar data-simplebar-auto-hide="false">
<div class="item"><img src="https://via.placeholder.com/250x150/0000FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x150/FF0000" /></div>
[...]
</div>
With data-simplebar I can add a custom scrollbar to any DIV.
There is just one thing I couldn't solve.
I want to add prev/next arrows to the scroll element.
The buttons should jump to the prev/next element in the DIV which is next to the left/right side of the div and not yet scrolled (partially) over.
And the JS should work for every slider instance on the site. Like the SimpleBar itself. There is no need for extra code per scroll container.
Is there anything I could use in jQuery?
EDIT: I found this answer and fiddle. I added the code to my example and changed it to left/right. It's not exactly what I need but I thought it could be a starting point. Unfortunately it doesn't work properly.
You can use the following code. Note that the scrolling depends on the viewport, so that once there's no more right width to go to, it won't have more room to move.
const DIRECTION = { PREV: 1, NEXT: 2 };
$(document).ready(function () {
$('.container').each(function (index, containerItem) {
var $gallery = $(containerItem).find('.gallery');
const simpleBar = new SimpleBar($gallery[0], {
autoHide: false,
scrollbarMaxSize: 50
});
var $scroller = $(simpleBar.getScrollElement());
$(containerItem).find('.scrollLeft').on('click', function () {
scroll(DIRECTION.PREV, $scroller);
event.preventDefault(); // prevents anchor jump on click
});
$(containerItem).find('.scrollRight').on('click', function () {
scroll(DIRECTION.NEXT, $scroller);
event.preventDefault();
});
$scroller.scroll(function () {
setButtonsVisibility($scroller);
});
});
});
function scroll(direction, $scroller) {
var $active = $scroller.find('.active');
var $target = direction == DIRECTION.PREV ? $active.prev() : $active.next();
if ($target.length) {
$scroller.animate({
scrollLeft: $target[0].offsetLeft
}, 2000);
$active.removeClass('active');
$target.addClass('active');
}
}
function setButtonsVisibility($scroller) {
var scrollLeft = $scroller.scrollLeft();
isScrollerStart($scroller, scrollLeft);
isScrollerEnd($scroller, scrollLeft);
}
function isScrollerStart($scroller, scrollLeft, $button) {
var $prevButton = $scroller.closest('.container').find('.scrollLeft');
if (scrollLeft == 0) {
$prevButton.css('visibility', 'hidden');
} else {
$prevButton.css('visibility', 'visible');
}
}
function isScrollerEnd($scroller, scrollLeft) {
var $nextButton = $scroller.closest('.container').find('.scrollRight');
var scrollWidth = $scroller[0].scrollWidth; // entire width
var scrollerWidth = $scroller.outerWidth() // visible width
if (scrollLeft >= scrollWidth - scrollerWidth) {
$nextButton.css('visibility', 'hidden');
} else {
$nextButton.css('visibility', 'visible');
}
}
.container {margin: 0 auto 2rem; max-width: 960px;}
.gallery {padding-bottom: 2rem; margin-bottom: 2rem;}
.gallery .simplebar-content {display: flex;}
.gallery .item {margin-right: 1rem;}
.simplebar-scrollbar:before {background: red !important;}
.simplebar-track.simplebar-horizontal {background: #eee !important;;}
.buttons {display: flex; justify-content: space-between; width: 100%; margin-bottom: 2rem;}
.buttons a {padding: 0.5rem; background: #ddd; text-decoration: none; color: #000;}
.scrollLeft { visibility: hidden; }
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css">
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>
As the title says, here is my snippet. Can someone tell me where I'm going wrong please?
var OnePageNav = function() {
$(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button p a[href^='#']").on('click', function(e) {
e.preventDefault();
var hash = this.hash,
navToggler = $('.navbar-toggler');
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, 'easeInOutExpo', function() {
window.location.hash = hash;
});
if (navToggler.is(':visible')) {
navToggler.click();
}
});
$('body').on('activate.bs.scrollspy', function() {
console.log('nice');
})
};
OnePageNav();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700">About Us</p>
<section class="ftco-section" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-12 mb-5" data-aos="fade-up">
<h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices.</h1>
</div>
</div>
</div>
</section>
I'm not sure where did you get the code and what was the intent (and probably there are more code there) but there are some issues with your code:
this.hash is undefined which means hash will be undefined.
It doesn't matter because when you call to e.preventDefault(); the hash will never changed.
The selector is not correct for the link you have in your example. Because the link has the class scroll-button but the selector contains .scroll-button p a[href^='#']. In your case it should be only .scroll-button.
So, to solve that issue, you can take the hash should be the href of the link. So, in your example, the link should lead to #section-about so you can grab the "hash" from the href attribute with attr() method.
var OnePageNav = function() {
$(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button").on('click', function(e) {
e.preventDefault();
var hash = $(this).attr('href'),
navToggler = $('.navbar-toggler');
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, function() {
window.location.hash = '';
});
if (navToggler.is(':visible')) {
navToggler.click();
}
});
$('body').on('activate.bs.scrollspy', function() {
console.log('nice');
})
};
OnePageNav();
#section-about {
margin-top: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700">About Us</p>
<section class="ftco-section" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-12 mb-5" data-aos="fade-up">
<h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h1>
</div>
</div>
</div>
</section>
https://output.jsbin.com/ceforal/7
Notice I removed the "easing" parameter because it doesn't including in the snippet.
Try This
$('a[href*="#"]').click(function (event) {
var href = $(this.hash);
if (href.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: href.offset().top - 85
}, 750, function () {
if (history.pushState) {
history.pushState(null, null, '#' + href.attr('id'));
} else {
location.hash = href.attr('id');
}
});
}
});
.sec{
margin-top: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
<!-- Navigation -->
<nav>About Us</nav>
<!-- Main Content -->
<main>
<h2 id="section1" class="sec">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h2>
</main>
</body>
</html>
See Example link
This question already has answers here:
Stop div scrolling once it reaches another div
(2 answers)
Closed 5 years ago.
I need to heading to scroll with the user, however only between two points. So scroll from its starting position with the user, to a certain position (above the contact us container) and then back with the user up.
Here is the current code used, this allows the heading to scroll until a certain point as required however does not scroll back up when the user scrolls up.
HTML:
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#"><h2>Contact us ➔</h2></a>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed'
});
}
});
};
$('#scrollwith').followTo(2700);
});
All credits to this answer goes to #MicronXD from the post here.
jQuery.fn.extend({
followTo: function(elem, marginTop) {
var $this = $(this);
var $initialOffset = $this.offset().top;
setPosition = function() {
if ($(window).scrollTop() > $initialOffset) {
if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'fixed',
top: marginTop
});
}
if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'absolute',
top: elem.offset().top - $this.outerHeight()
});
}
}
if ($(window).scrollTop() <= $initialOffset) {
$this.css({
position: 'relative',
top: 0
});
}
}
$(window).resize(function() {
setPosition();
});
$(window).scroll(function() {
setPosition();
});
}
});
$('#scrollwith').followTo($('#contact-container'), 0);
#contact-container {
background: red;
height: 900px;
}
#scrollwith {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#">
<h2>Contact us ➔</h2>
</a>
</div>
</div>
</div>
I need to set a easeOutBounce for a webpage back-to-top button .
I have below code for .scrollTop but unable to add
{
duration: 2000,
easing: "easeOutBounce"
}
Existing .js:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
});
});
Like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Or, like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate(
{scrollTop: 0},
{
easing: 'easeOutElastic',
duration: 1500
}
);
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Useful sites:
http://easings.net/ (usage examples at bottom)
http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Install just the easings to get around requirement for jQueryUI
I am using jQuery code from http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/ to scroll to a Div within a Wrapper.
The code provided animates the body (Scrolls the body down onClick) I am trying to animate the scroll inside a div, not body.
My code below:
HTML:
Scroll Down
<div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
<div id="Div1" style="height:200px; width:600px;"></div>
<div id="Div2" style="height:200px; width:600px;"></div>
<div id="Div3" style="height:200px; width:600px;"></div>
</div>
jQuery
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
I know it has something to do with $('html, body').animate({ }) but im not sure how to change it.
Thanks
JSFiddle http://jsfiddle.net/3Cp5w/1/
Animate the wrapper instead of the body:
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
http://jsfiddle.net/robbyn/qU6F7/1/
Try the following Code
<body>
Scroll Down
<div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
<div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
<div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
<div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
</script>
i think you want div3 to scroll down inside Wrapper
you need to first specify the height of Wrapper to a small number so that scroll is visible
&
as you guessed change html,body to .Wrapper
do ask for help
Add the jQuery updated file reference
<script src="http://code.jquery.com/jquery-1.10.2.js" />