We Keep Coding

Stop page scroll jquery

In JavaScript I am looking for a moment when user scrolls to some <div>. Then I want to stop user's inertial scrolling and scroll to some another object via script.
How can I stop the scrolling which has already started?
So I want something like this:
$('#selector').stopScrolling().scrollTo('#another_object');
I know that $('#selector').stop() stops animations, but it seems like it can't help me there

Instead of using .scrollTo(), use
// see http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12/
$('html,body').animate({ scrollTo: 0 }, 1000);
then you can stop the scrolling using
// see http://stackoverflow.com/a/2836104/145346
$('html,body').stop();

div scrolls to top after refresh need to stop auto scroll to the top

I am trying to get a div that refreshes every 2 seconds to stop scrolling back to the top after the 2 second refresh I have PHP code and javascript. The Javascript I am using is:
function at_Ticket_scrollBottom()
{
var objDiv = document.getElementById("cartTicket");
objDiv.scrollTop = objDiv.scrollHeight;
}
function at_Tabs_Update()
{
if(div_WPOSVar_IsVisible())
{
//calling setTimeout without clearing any existing timeout can add multiple calls.
//IE the normal 2 second sequence, then call at_Tabs_Update two more times, and
// now we have 3 timeouts set to call at_Tabs again, etc.
//This wouldn't be an issue except that we call at_Tabs_Update directly to cause
// immediate refresh from many places.
//So clear the handle everytime to get rid of the last one we set.
clearTimeout(at_Tabs_Timer);
at_Tabs_Timer=setTimeout("at_Tabs_Update()", 2*1000); //every 2 seconds
return;
}
}
So after the refresh if I scroll down to the bottom of the ticket it jumps back to the top after the next refresh so I can never get to the bottom and select an item and edit it before the refresh how do I stop the auto scroll back to the top.

from the scars infos I can gather here I think your best bet would be to save your current scroll position before you refresh and after the ajax call scroll to that saved position.
use jQuerys .scrollTop() function for both reading and setting the scroll.
some pseudo code for illustration:
at ajax refresh function
var curPos $(element).scrollTop();
... do ajax call ..
ajax callback: $(element).scrollTop(curPos);

javascript - track scroll event

I have a rogue scroll event that keeps automatically scrolling my page to the top each time I load a div element using Ajax. How do I track this down? I've tried setting breakpoint in scroll event handler and looking at callstack but that doesn't give me anything useful since it just shows it coming from jquery, but I am interested in knowing what event on what DOM element caused the scroll.
A little background, I am loading a div element using Ajax when a div element is clicked (onclick). NOTE this is not anchor!! But whenever I am close or at the bottom of the page, after the div element is loaded and added to the page, the page scrolls all the way to the top. Really annoying and trying to track down the element that initiated that rogue scroll...
Thank!

try looking into waypoints plugin if you don't mind a jQuery plugin , this one is great from tracking / handling scrolling

If I've understood fine you need a code similar to this, in this code I show new data from ajax when the user is (through scroll) to a distance of 4000 pixels from the last element (in this case a div.newDeal:last) (was a very long web).
$(document).ready(function() {
//global variable in this script to test if I already made the request ajax ( I dont
//want to make continious ajax request)
var loaded=false;
$(window).bind('scroll', handlerScroll); //attach event to the scroll
})//end document ready
//FIRE AUTOSCROLL (FIRE REQUEST AJAX)
//*************************************
var handlerScroll=function (){
//get position of the scroll
var space=$('#listdeals div.newDeal:last').offset().top - $(window).scrollTop();
//if that distance is less than (or the middle, or the bottom). fire the request ajax
if (space<= 4000 && jQuery('div.previousDeal').size()==0){
//disable scroll event
$(window).unbind();
//
//build data post
//
var parameters="actionAutoscroll=true&"+.........;
//MAKE REQUEST AJAX
//********************
$.ajax({
url: "/offers",
type:'POST',
data: parameters,
success: process_previousDeals
}); //end ajax
return false;
}
}//end if load previous deals depending of scroll
}//end handler
function process_previousDeals(results){
//inject new content in the page
}

How to infinite scroll with waypoint.js?

So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.

After you load the 10 elements on the page, wire up a jquery waypoint that will trigger an action.
The first step of the action will be to disable to waypoint (so it only fires once). Then have it load additional data via ajax and render that on the page. After (via callback) that is done, you'll reactivate the waypoint so that the process will start anew when the user scrolls down to it.
Your application will have to keep track of how many and what elements are loaded, so your ajax requests request the correct numbers (i.e. 10 are loaded, so the next request should start at 10 and fetch 10, next should start at 20 and fetch 10, etc).
The "75% of the way to the bottom" is easily configurable in waypoint. You'll use the "offset" for that.
Check out the waypoint documentation
I put the DOM element that triggers my infinite scrolling underneath of the main grid that I have, so as I load more content, it automatically pushes it down.

I used jquery masonry+waypoint js..But if you dont register waypoint in masonry callback, it will load the items that comes with your ajax call more than once..Here is my solution;
//INFINITE SCROLL
var $loading = $("#itemsloading"),
$footer = $('footer'),
opts = {
offset: '120%',
onlyOnScroll:false
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$loading.toggle(true);
$.get($('.more').attr('href'), function(data) {
var $data = $(data.result[0]);
if($(data.result[0]).length==0){
$loading.toggle(false);
return false;
}
$('#items').append( $data ).masonry( 'appended', $data, true,
function(){
$footer.waypoint(opts);
});
$loading.toggle(false);
});
}, opts);

Keeping the scroll position while loading data using ajax

I load more data in the table when user clicks on the "more" button but it takes the scroll position to the beginning of the table. I tried using <a id="#placeholder"/> and setting the window.location.hash = "#placeholder" or $("#placeholder").click(); but nothing works out.

Try something like this:
window.scrollTo(1, 0);