How to use the same jQuery scrolling function for multiple elements - javascript

I have a scrolling function that reveals a 'scroll to top' element when user scrolls to 160 pixels, when clicked this element the page scrolls to the top of the page.
I want to use that function create more scroll buttons which will be revealed at different stages in the document and that scroll to different areas.
For example when the user scrolls to 400 pixels down the element "next" appears when clicking it page scrolls 300px down, they get to 900px from top a new scroll element appears which when clicked scrolls down to 1300px, and so on.
here is the jQuery code i have:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 160) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
HTML:
<div class="scrollToTop-container">
<img src="img/icon_arrow_up.png" width="24" height="24" /> <br/>Scroll to top
</div>
i hope thats not too confusing.
Thanks

Maybe you can use a function like this I made reusing some parts of your code:
function scroll(id,show,limit,timeout){
$(window).scroll(function(){
if ($(this).scrollTop() > show) {
$(id).fadeIn();
} else {
$(id).fadeOut();
}
});
$(id).click(function(){
$('html, body').animate({scrollTop : limit},timeout);
return false;
});
}
And then use it like this:
scroll(".scrollToTop",160,0,800);
where first parameter is class or id you want to be affected, second is the position of the element at certain height (from top), third is limit (where you want to scroll up) and last one is the duration of the animate function.
EDIT: You may also like to stop on specific px, not only scroll to top, so I changed the function to set the scrollTop position at your desire.

Related

How to check if the element is near the bottom of the screen?

How is the way to check if some the element is near the bottom of the screen let say 100px from the bottom? (not the bottom of page).
The thing is i wanted that when this element is clicked, an another element will shown up and will slide to top rather to down if is near the bottom of the screen?
You can identify when an element is under 100px from the bottom of the screen with the following condition (without the need to use jQuery):
if (window.innerHeight - element.getBoundingClientRect().bottom < 100){
// the desired place
}
I think what you want is a button that displays when the user is almost at the bottom of your screen and when the user clicks on it, it scrolls them back to the top of the screen.
You may want to use JavaScript to achieve this.
Using the jQuery library
<script type="text/javascript>
$(document).scroll(function(){
var x = $(this).scrollTop();
if (x > 250) //The 250 is the total height of div that the user scrolls to before the button displys for the user to click
{
$('.button').fadeIn();
} else {
$('.button').fadeOut();
}
$('.button').click(function() {
$('html, body').animate({
scrollTop: $('.topmost_div').offset().top}, 'slow'); //tell the page to scroll back to the div at the top of the page.
});
});
</script>
Hope this helps

Misplaced Scroll Bar When scrollTo Called

I am using the below function to scroll to a Div inside a Div.
It works but the car stays at last position so if the user scrolls it flashes to the original position. To clarify the scroll bar is actually at the top of the div but the user sees to bottom element but when user scrolls up he or she doesn't get the expected result of moving to the element right above the last they get bumped to the top.
jQuery.fn.scrollTo = function (elem, speed) {
$(this).animate({
scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
}, speed == undefined ? 1000 : speed);
return this;
};
onclick="$('#usermessageDiv').scrollTo('.last_usermessage', 2000);"
$('.small-chat-box .content').slimScroll({
height: '234px',
railOpacity: 0.4
});
<div id="usermessageDiv" class="content" style="overflow: scroll; width: auto; height: 234px;">
The image below shows where the bar is vs the 2nd lower red arrow where the scroll bar should be in regards to the view shown.
SlimScroll has a scrollTo setting that you should use instead of your scrollTo function.
scrollTo - Jumps to the specified scroll value. Can be called on any
element with slimScroll already enabled. Example:
$(element).slimScroll({ scrollTo: '50px' });
You will need to use jQuery's position() method to get the scroll distance of the target element relative to the parent. If you need detailed help with that, please post some HTML for the usermessageDiv.

Making a div scroll with the page after a certain distance

I have a web page set up with 225px of header space and then the body begins. I have a floating div that I want to follow with the body as the page gets scrolled down. The div follows but I dont want it to start until the user has scrolled past the header. Here is a picture example:
Once the user has scrolled past all the red (225px), then the blue div should being scrolling with the page.
The current problem is that the div begins moving the second the user scrolls through the header and ends up 225px below the top of the page.
I believe something like this is what I need, but it doesn't seem to do anything (at least in chrome)
if($(window).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
Thanks!
You haven't set any event listener. Include JQuery and here's the working code:
$(document).on("scroll", function(){
// or as a shorthand $(document).scroll(function(){
if($(document).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
});

How to fadeIn to fadeOut elements while scrolling?

I have more than 70 divs on my page.
I don't want to show all the divs at once until user scrolls page.
I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.
But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.
However i gave it a try-
$(function(){
$(window).css("overflow","hidden");
var lengthy= $('.content').length;
alert(lengthy);
var scrollbottom= $(window).scrollTop()+$(window).height();
$(window).scroll(function(){
$(document).css("overflow","hidden");
if($(window).height() >scrollbottom)
{
$(document).fadeIn();
}
});
});
Jsfiddle
How can this be done?
EDIT your Jquery to somthing like this
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...
This Example will show you what i think you want
http://www.webresourcesdepot.com/dnspinger/

how to show a div when scroll bar goes down, and when i scrollbar goes up it should disappear

i have a website it like 1800px in height. i want when user scrolldown around 200px it show an div on the top of the layout and its should stick with the page. when user scroll back to top , the div should disappear.
You can trigger an event on scroll:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
topDiv.show();
} else {
topDiv.hide();
}
});
You can use the jquery scroll method
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});

Categories