I'm trying to setup jquery scrolltop with previous and next button, so that the user can scroll within a scrollable div.
I came across this post LINK and was trying to setup for my application, but it doesn't seems to scroll to the top of the next/previous div.
Could anyone point out where the problem is and perhaps a solution to it? Any input would be appreciated, thanks.
CSS:
.image_holder {
display: block;
height: 100%;
}
.section{
position: relative;
height: 80vh;
background: rgba(255, 226, 57, 0.0);
overflow-y: scroll;
margin: 0 auto;
border: #000000 solid thin;
}
HTML:
<div class="page_scroller">
<ul >
<li class="list-unstyled col-lg-6 bg-primary">Up</li>
<li class="list-unstyled col-lg-6 bg-primary">Down</li>
</ul>
</div>
<div class="section" >
<div id="highlight-1" class="current image_holder">A</div>
<div id="highlight-2" class="image_holder ">B</div>
<div id="highlight-3" class="image_holder ">C</div>
<div id="highlight-4" class="image_holder ">D</div>
</div>
Jquery:
var scrollTo = function(element) {
console.log(element);
$('.section').animate({
scrollTop: element.offset().top
}, 500);
}
$('.next').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $next = $current.next().first();
if ($next.length!=0) {
$current.removeClass('current')
$next.addClass('current');
scrollTo($next);
}
});
$('.prev').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $prev = $current.prev().first();
if ($prev.length!=0) {
$current.removeClass('current')
$prev.addClass('current');
scrollTo($prev);
}
});
My JSFiddle
I think it's actually working as intended: it scrolls to the section, but it scrolls based on the top edge of the viewport, not based on the overflowed div.
Try replacing
$('.section').animate({
scrollTop: element.offset().top
}, 500);
with
$('.section').animate({
scrollTop: element.position().top
}, 500);
Related
I have made a page (on Shopify) and I made there a fixed "go to top" arrow on the left bottom. It's okay, but when I scroll to the page bottom the arrow is will be in front of the footer, and I want it to stay above the footer.
Here is the code that I use:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.go-top {
position: fixed;
bottom: 2em;
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
↑
$(document).ready(function() {
$(window).scroll(function() {
//--------------------------- Lines added ------------------------//
var footertotop = ($('.footer').position().top);
var scrolltop = $(document).scrollTop() + window.innerHeight;
var difference = scrolltop-footertotop;
if (scrolltop > footertotop) {
$('.go-top').css({'bottom' : difference});
}else{
$('.go-top').css({'bottom' : 10});
};
//--------------------------- end ---------------------------------//
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.container{height:2000px;position:relative}
.footer{height:200px;width:100%;position:absolute;bottom:0px;background:red}
.go-top {
position: fixed;
bottom: 20px;
display:none; // <---- Dont display on page load
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
↑
<div class="footer"></div>
</div>
add z-index to the css.
something like:
z-index: 100000
make the number as large as needed for it to be on top.
I'm trying to make a website where the penultimate section takes a fixed position and the last one goes over. However, the goal is for the last section to never be halfway through. To do this, after the penultima section is in a fixed position, I detect if the scroll comes from above. If it comes, at a certain point the page scrolls to the bottom. I'm having problems here because when the page does do the animation of scrolling the last section gets stuck. Can you help me?
function fixe_section(scrollTopPx){
if(scrollTopPx>$('.section2').offset().top){
$('.section2 div').css({'position':'fixed', 'bottom':'0', 'z-index':'-1'});
}
else{
$('.section2 div').css({'position':'static', 'z-index':'0'});
}
}
$(window).scroll(function(event){
scrollTopPx = $(window).scrollTop();
fixe_section(scrollTopPx);
});
section_move();
function section_move(){
var start_mov = $('.section2').offset().top+$('.section2').height()/2;
var move_to = $('.section3').offset().top+$('.section3').height();
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st>lastScrollTop){
if(st>start_mov){
$("html, body").animate({
scrollTop: move_to
}, 600);
return false;
}
}
lastScrollTop = st;
});
}
section {
width: 100%;
height: 600px;
position: relative;
}
section div{
width: 100%;
height: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>
The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice
I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.
I want to create scroll to section like nexus5 website https://www.google.com/nexus/5/
i.e. one button doing all. Click on one button it takes you down to different sections and when it reaches last ID it scrolls all the way up back.
JS
if(window.location.hash !=""){
var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+window.location.hash+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollIdPrev);
$(".next").attr("data-target",scrollIdNext);
});
}
$('.next').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollId);
$(".next").attr("data-target",window.location.hash);
});
});
$('.previous').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".next").attr("data-target",scrollId);
$(".previous").attr("data-target",window.location.hash);
});
});
HTML
<div class="move">
<div class="previous" data-target="#one">UP</div>
<div class="next" data-target="#one">DOWN</div>
</div>
<section class="slide" id="one">First</section>
<section class="slide" id="two">Second</section>
<section class="slide" id="three">Third</section>
<section class="slide" id="four">Fourth</section>
CSS
section{
height: 400px;
border: 1px solid black;
}
.move{
position: fixed;
bottom: 0;
right: 0;
}
.previous, .next
{
background: red;
height: 20px;
width: 70px;
margin-bottom: 5px;
cursor: pointer;
}
Fiddle
I have achieved some functionality but not all.
Just use the scrollIntoView() function everytime you want to scroll to the next element.
Just have an array of elements you want to go to and just save the pointer in a global variable.
window.scroll=0;
window.navigationpoints=['id1','id2','id3'];
$('.next').click(function(){
if(window.scroll<window.navigationpoints.length){
document.getElementById(window.navigationpoints[window.scroll]).scrollIntoView();
window.scroll++;
}else {
document.getElementById(window.navigationpoints[0]).scrollIntoView();
window.scroll=1;
}
});
I have a horizontally centered div #box1 that has margin: 5px auto that has to slide to the left and off the screen, while #box2 slides into the screen from the right, when the button .class is clicked on. I've seen how its done for absolutely positioned divs, now how do you do it if its not?
HTML Structure
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
Failed attempt
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({
left: '150%',
}, 'slow' );
});
Is this the effect you're looking for: jsFiddle example.
jQuery:
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({ left: '-500px' }, 'slow');
$("#box2").animate({ left: '0px' }, 'slow');
});
CSS:
#box1, #box2 {
margin: 5px auto;
border: 1px solid #999;
position:relative;
}
#box2 {
left:500px;
}
#container {
overflow:hidden;
}
HTML:
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
If you want to slide out a dive you could use jQuery UI hide methods
$(".button").click(function() {
$("#box1").hide('slide', {
direction: "left"
}, 2000);
});
and you can do the same to slide in
$("#box2").show('slide', {
direction: "left"
}, 1000)
Try
$(".button").click(function() {
$("#box1").animate({
marginLeft: '-150%',
}, 'slow' );
});
If you needed to, it wouldn't be difficult to absolutely position the element in the same spot it was before animation.
var elm = $("#box1");
var position = elm.position();
var cssObj = {
'position' : 'absolute',
'top' : position .top,
'left' : position.left
}
elm.css(cssObj);
This might work for you.
$(".button a").click(function() {
var $docWidth = $(window).width();
var $boxOffset = $('#box1').offset();
$("#box1").css('marginLeft', $boxOffset.left);
$("#box1").animate({
marginLeft: $docWidth
}, 'slow');
});
CSS:
#container: { overflow: hidden; }
http://jsfiddle.net/dZUXJ/