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" />
Related
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>
I have tried to add a .fadeIn effect to a script instead of .animate, but it doesn't work. Basically, I try to make fading in elements when you scroll to them. This is the script and HTML:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).animate({
'opacity': '1'
}, 1500);
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).fadeIn(400, function(){
$(this).css('opacity', 1)
});
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
I have a div with overflow:hidden and a set height. When I run animate(), I want the height to animate to the full size.
For example, I have this:
http://jsfiddle.net/aW9k9/
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
This example works, but only because I knew the total height of all the elements.
<script>
function lol() {
$("div.main").animate({height:'200px'}, 1000);
}
</script>
^How can I recreate that without knowing the total animate height?
A Fixed version for #MattBall's answer, which use the .outerHeight(true) to include the inner div's margins.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).outerHeight(true);
});
$main.animate({height:totalHeight}, 1000);
}
If changing html code isn't a problem, you can simply change your html code like this:
clicky
<div style="height:50px; overflow:hidden;" class="main">
<div>
<div style="height:100px; background:blue;">text</div>
<div style="height:50px; background:yellow;">text</div>
<div style="height:50px; background:green;">text</div>
</div>
</div>
and you can get height of inner elements like this:
$('div.main > div').outerHeight()
and also here is the lol function:
function lol() {
$("div.main").animate({height:$('div.main > div').outerHeight()}, 1000);
}
You could do programmatically the same thing that you did mentally to come up with the 200px value: sum the height of the div.main > divs.
function lol() {
var $main = $("div.main"),
totalHeight = 0;
$main.children().each(function () {
totalHeight += $(this).height();
});
$main.animate({height: totalHeight}, 1000);
}
http://jsfiddle.net/mattball/CXyKK