Stop page scroll jquery - javascript

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();

Related

Using Javascript to scroll to an element automatically when the user scrolls

I made a website that has 2 sections. You have to scroll a bit to come to section 2 so I wanted to make a code which sends you directly to section 2 when you scroll down.
So I made a basic function that works when I use a button to trigger it but I couldn't figure out how can I make this function run when the user scrolls. The function:
function scroll_to_target(){
document.getElementById("moreinfo").scrollIntoView();
}
Basically I need something that when the user scrolls down in the first section of the website it triggers "scroll_to_target()" function which makes the user scroll to "moreinfo" (second section) of the website directly and smoothly.
i guess you can use jQuery to do that, for the scroll function to hit you could do something like this after importing jQuery to project:
$(window).on("scroll", function() {
//call the function here or make any changes
});

Differentiate automatic scroll after refresh from other kinds of scrolling

I have observed that after a refresh, by pressing F5 or even some location.reload();, the browser forces a scroll to the last position it was before the refresh.
The thing is, we track the user's progress across the page, and this "automatic" scroll fires all the checkpoints we have placed all the way to this last position before the refresh.
We are wondering whether is it possible to differ this "automatic" scroll from a scroll made by the user.
For instance, we have lots of:
$(window).scroll(function() {
var windowMax = $(window).scrollTop()+$(window).innerHeight()/2;
if (windowMax > .....)
});
Is there a way to differentiate this two sorts of scrolls?
Edit
Please, see that I don't want to prevent the automatic scroll, I want to differ it.
You can add a ready event listener and immediately check the .scrollTop() after it has been loaded.
var isScrolledAfterRefresh;
$(function() {
isScrolledAfterRefresh = $(window).scrollTop() > 0;
});
You do need to be sure that the rest of your code is executed after the ready event is fired.
This is something embedded in the users browsers. One way to counter it I suppose is to not have scrolling enabled on body or HTML, and have a custom scroll inside an element that is not on the top layer
You could also deffer recording of the scrolling until the page has fulling been rendered and the document completely loaded.
You could use the following to do stuff when the document is ready :
$(document).ready(function(){
// do stuff here
});

Want to Scroll to a position after loading but after a short stint it automatically scrolls back to the top (JQUERY,JQUERY-MOBILE)

I use SYMFONY 3 and JQUERY 1.11.1 + JQUERY MOBILE 1.4.2
On a page I have a table, each row of the table can be extended (containing a form regarding the row), when I open a row the page is generated again thru SYMFONY controller.
At the bottom of my TWIG file, I add a tag with $(document).ready(...). I want to manipulate the SCROLL thru JQUERY (or JS) to reach the position of my opened row.
I've seen that it could be done that way:
$('body').animate({
scrollTop: $('#myRowId').offset().top + 'px'
}, "fast");
Or that way:
$(document).scrollTop($('#myRowId').offset().top));
It does work for a short time and then the SCROLL goes back automatically to the top (y-position:0) with not any explanation (that I am aware of).
I managed to go around by using the setTimeout like:
setTimeout(function({$(document).scrollTop($('#myRowId').offset().top);},5000);
But it is not really nice, i'd rather know which event is triggered by JQUERY or JQUERY MOBILE under the hood that sets the SCROLL back to the top.
Has anyone got any idea?
Here is the solution with the onload event:
$(window).load({'rowId':'#'+rowRootId+'_id'},function(event){
$('body').animate({scrollTop: $(event.data.rowId).offset().top + 'px'}, "normal");
})

jQuery scrollTop function goes down first and then animates to top

I want to scroll to top if there is an error on postback of a button click. I am working on asp.net C#. I am using following method to scroll to top.
.cs code on page_load method
if (IsPostBack)
{
System.Web.UI.ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPageLogin", "ResetScrollPositionLogin();", true);
}
.ascx code for jquery call
function ResetScrollPositionLogin()
{
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
When I use this code and click on login button then it scroll to the down first and then scroll to up. Please help me to resolve this.
Well, many browsers have smart surfing, which means they can remember things like page position and form input without being told to. This has been addressed by some at stack already
Another really hacky way of doing it is to set the body of your page to display:none and then use jquery show() or plain javascript to set the display to block after your content has loaded. Hides any jumping of page position but not ideal design to say the least.

How can I check if a user has grabbed a scrollbar on a website?

Basically I want to see if a user has a hold of a scrollbar on my site. is there a Jquery function I can use to return a Boolean based on weather the user has a hold of the scrollbar or not?
Edit: adding my site so you can see the problem. When you try to scroll the scrollbar up the timed event to set the scrollbar to the bottom kicks in and sends it to the bottom. I need it to not do that while focus is on the chatbox/chatbox scrollbar, but it's not working: http://exvs.us/
If you really need to accomplish this, one way would be to hide the default scrollbar and create your own in javascript. You can then handle click events on your scrollbar. However, this won't work well for users that have javascript disabled by default.
Use scroll method of the Jquery object :
more information there => http://api.jquery.com/scroll/
sample :
$(window).scroll( function () {
console.log('pretty easy no ?');
});

Categories