If i search for something on this website
http://www.192.com/all/search/
It loads the first 20 results and i have to scroll down and wait for it to load. then scroll down again until it loads all results and can no longer scroll down. how can i do this using javascript. This is what i have so far
loop(100) {
wait(1)
run javascript("window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout(\'pageScroll()\',100); // scrolls every 100 milliseconds")
wait(1)
}
If you're trying to detect when you've scrolled to the bottom of the container, here's an example:
$('.container').on('scroll', function(e) {
var offset = 100;
if ($(this).scrollTop() + offset >= $(this).height()) {
// Code to make an ajax request to append new content here
}
});
http://jsfiddle.net/bmYKc/
Related
I am using Jquery to create an effect that will change things as the user scrolls
$(function() {
var headerPosition = $(".home-header");
$(window)
.scroll(function() {
var scroll = $(window)
.scrollTop();
if (scroll >= 200) {
headerPosition.addClass("home-header-color");
} else if (scroll <= 600) {
headerPosition.removeClass("home-header-color");
}
});
});
This is what i'm using a simple add remove class function that gets triggered on a certain scroll amount.
What I want to do is to make it as a user scrolls once no matter how fast.
This is what I came up with but dose not work well scrolling up.
Codepen
I want it to only appear when you reach the top of the screen when scrolling up. Not on just one scroll up.
I tried combining the two but it didn't work out well.
I have looked and tried to implement many solutions from SO, but cannot get it to work. I have tried using the iscroll library, setting timeouts etc.
I want to scroll to the top of the window/page in a mobile phone device when a user clicks a button.
$('.box').click(function(){
document.body.scrollTop = 0;
});
here you have version which is working on everything with documentation ;)
// ===== Scroll to Top ====
$(window).scroll(function() //When the page is being scrolled
{
if ($(this).scrollTop() >= 150) // If page is scrolled more than 150px
{
$("#return_to_top").fadeIn(200); // Fade in the arrow, 200 means that arrow will be shown in 200 miliseconds (fast) - 600 means slow, 400 is normal
}
else
{
$("#return_to_top").fadeOut(200); // Else fade out the arrow, fast
}
});
$(document).ready(function() //When the page is ready, load function
{
$("#return_to_top").click(function() // When arrow is clicked
{
$("body,html").animate(
{
scrollTop : 0 // Scroll to top of body
}, 400); //how fast the scrolling animation will be in miliseconds
});
});
I'm currently trying to get a div container to slide in from one side once the user has scrolled down a certain amount of px and disappear after the user has scrolled down another set amount of px.
This page has what I want to do - http://2014.igem.org/Team:CU-Boulder
If anyone can help me, I'd really appreciate it.
To get user's scroll data you can use scrollTop() jQuery method.
Description: Get the current vertical position of the scroll bar for
the first element in the set of matched elements or set the vertical
position of the scroll bar for every matched element.
For example:
$(window).scroll(function() {
var currentHeight = $(window).scrollTop();
if (currentHeight > 200) {
// some action
}
if (currentHeight > 300) {
// another action
}
});
You might be interested looking at this WOW plugin, or at this scrollrevealjs.
If you take a look at http://www.kahuna-webstudio.fr/ and scroll down the page about 50 pixels or so you will see a div on the left side of the screen slide out. I have managed to duplicate this effect but there is one thing that escapes me; and that is when you hit refresh on my page my jquery programming resets. I don't want this to happen. http://www.kahuna-webstudio.fr/ has it working perfectly. On their page when scroll down 50 pixels and the left nav appears and even when you hit refresh the left nav is still there. The left nav only disappears when the user scrolls back to the top of the page.
What is currently working: The user scrolls down 296 pixels on my page and the left nav slides out and the user brings the scroll bar back to the top of the page (pixels less than 25) and the left nav slides back and disappears. This is all working.
What is not working: But let's say the user scrolls down 296 pixels and the left nav slides out and then the user hits refresh while they are viewing the page. Well in this case the left nav disappears. My jquery programming is reset. I want the left nav, when the user is at 296 pixels or greater, to always be visible even if the user hits refresh.
My code is below. I hope my question makes sense and I welcome any help. Thank you.
$(window).scroll(function () {
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 80;
var smallheight = 0;
var smallwidth = 0;
//var expanded = "false";
if ((wintop > 296)) {
//expanded = "true";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottom").stop().animate({
width: newwidthgrow + "px"
}, 'slow', function () {
$("#slidebottomContents").fadeIn();
});
});
}
if ((wintop < 25)) {
//expanded = "false";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottomContents").fadeOut(function () {
$("#slidebottom").stop().animate({
width: smallwidth + "px"
});
});
});
}
});
If you don't have code in place to remember the scroll position before a refresh, the page will always refresh and scroll position will be 0 again. It sounds like that's not your desired functionality. Triggering a scroll at startup will not fix your problem unless you set the correct window scroll position before triggering it.
The example page you gave looks like it uses multiple scroll libraries, one of which (not sure which one) probably handles setting the scroll position on a refresh.
To do it yourself, you'd have to make use of local storage or the url like explained here:
Refresh Page and Keep Scroll Position
Have this window scroll function in a separate place. Call it from window scroll and also from document ready. This will make sure that the user's position is checked both when the page is being scrolled and when the page is loaded/refreshed.
You can use cookie to solve this probelm if you don't want to use server side to fix position when page is reloaded.
I am implementing on demand loading of data through scrolling.
I have register the function in document.ready for a div.
The data should only be populated once the scroll is reached to the last. so to identify whether the scroll has reached till the last i am using the below function.
$("#tree").scroll(function () {
if (isScrolledToBottom(this)) {
}
});
But the function is not returning the correct value. What I mean is it should return the a true value when scroll has reached to its last.
function isScrolledToBottom(object) {
return ($(object).attr('scrollHeight') - $(object).scrollTop() - 1) <= $(object).height();
};
Try this instead :
return ($(object).attr('offsetHeight') + $(object).attr('scrollTop') >= $(object).attr('scrollHeight'));
If you want to do infinite scrolling, check out my answer here:
How to load the web page content based on user scrolling
This demo is triggered at a certain Y scroll position. If you are looking to accomplish this specifically when a user reaches a certain item, you might want to look at the Waypoints plugin.
http://imakewebthings.com/jquery-waypoints/
Infinite scroll Demo: http://imakewebthings.com/jquery-waypoints/infinite-scroll/
$('.theItems:last').waypoint(function(event, direction) {
//Ajax fetch here
});
var scrollHeight = $(object).prop("scrollHeight"); // total scrollable height of the element
var scrollTop = $(object).scrollTop(); // how far you have come from the top while scrolling vertically
var height = $(object).height(); // the constant height of the portion in display at all times
if (scrollHeight === (scrollTop + height)) {
//console.log("fetching page");
fetchNextPage();
}