I have a code
var scroll = $(window).scrollTop();
$(window).on("scroll", function () {
scroll+=100;
$(window).scrollTop(scroll); //*
})
But this code scroll the window with a loop to the bottom. how to make something like throttle in order to avoid the recursion ?
The goal: i have the 404 page and iframe with index page below of 404. and when user try to scroll 404 page - index pages scroll to top with doubled speed
To Solve your issue I took a slightly different approach, upon scroll I am scrolling to the Index location only once.
var $window = $(window);
var indexLocation = 505;
$window.one("scroll", function(e){
if ($window.scrollTop() < indexLocation){
$("body").animate({scrollTop: indexLocation});
}
});
Also you can check it out here: http://jsfiddle.net/jsJJK/1/
Related
I am using the following code to detect when a user scrolls to the bottom of the page:
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
}
});
However, instead of telling me when I scroll to the bottom of the page, the if statement becomes true when I scroll all the way to the top. Why is this happening? Thanks so much. The reason I need to detect when the user scrolls to the bottom is so that I can dynamically load content from a server. I don't think this matter, but I am using Flask on the backend and the malfunctioning page is rendered as a template with jinja-2.
_onScrollHandler(event){
if(event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight){
console.log('Reacehd Bottom')
}
}
Call this function when onscroll event occurs and from event arg you can get the scrollHeight scrollTop and clientheight.
Please try with this one
Hi Guys,
I'm not so good with jQuery and javascript.
I will make a script that take the position of my div and when it's on the top of the page it make something.
Example:
I have a menu. When i scroll the page and my div arrive at the top (or better at 100/200px from top), something in my menu changes...
I hope somebody can help me.
Thanks.
You should use the jQuery offset() scrollTop() and scroll() methods to achieve this.
http://api.jquery.com/offset/
https://api.jquery.com/scrollTop/
https://api.jquery.com/scroll/
Offset returns the pixel value of the elements from the top of the page. Run this on scroll, and you can detect when the element is 100px, or 200px from the top.
Here is an example of running offset() and scrollTop() on window.scroll(), and adding/removing classes when the element has reached the top of this page. In this example, I am fixing the $mainMenuBar to the top of the page when the user scrolls past it, and un-fixing it when the user scroll back up past it.
// declare vars
var $window = $(window),
$mainMenuBar = $('.anchor-tabs'),
$mainMenuBarAnchor = $('.anchor-tabs-anchor');
// run on every pixel scroll
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainMenuBar.addClass('fixed-top');
$mainMenuBarAnchor.height($mainMenuBar.height());
}
else {
// Unstick the div
$mainMenuBar.removeClass('fixed-top');
$mainMenuBarAnchor.height(0);
}
});
Hope this helps.
You can compare the offset of your div element to how far down the page the user has scrolled.
The $(window).scrollTop() function get you how far the user has scrolled down, i.e :
$(window).scroll(function() {
var yourDiv = $("#theIdOfYourDiv");
var window_offset = yourDiv.offset().top - $(window).scrollTop();
if ( window_offset < 100 )
{
// do what you want
}
});
I have a popup window in my site that show additional information about the elements been show in the main screen. I need to syncronize the scrolling between the two windows, in a way that when the user scroll one of the window , the other window is automatticaly scrolled in the same ammount.
I was able to do that using jquery scroll event, and using the scrollTop function to set the scroll position. something like this:
$("#localDiv").scroll(function() {
var scrollPos = $("#localDiv").scrollTop();
$("targetElement").scrollTop( scrollPos );
});
I've simplified the actual code, because I have to do some work to reach the elements in another window, but this is not the question.
The problem is, this code works fine in Chrome and IE, but in FireFox the scrolling gets really slow.
I've created an example here : http://jsfiddle.net/Lv2dw787/4/. The problem seems to ocurr with DIV's in the same page as well. You can note that when the scrolling syncing is disabled, the speed turn back to normal.
Does anyone have a clue on how to fix this on FireFox?
Edit after Dave Chen answer:
The accepted answer solved my problem, but it has a catch. I first tried to do this:
lock = true;
try {
var scrollPos = $("#contentDivA").scrollTop();
$("#contentDivB").scrollTop( scrollPos );
}
finally
{
lock = false;
}
But the $("#contentDivB").scrollTop( scrollPos ); line seems to generate a scroll event on divB only after the current function finishes executing, so the finally part of try..finally was executing before that. So I had to this:
lock = true;
var scrollPos = $("#contentDivA").scrollTop();
$("#contentDivB").scrollTop( scrollPos );
and on DivB scroll event:
if (lock)
lock = false;
else {
(Do the scroll on DivA)
}
The reason is because of two reasons:
Firefox does smoothing on its scrolling
jQuery's scrollTop will trigger events
Let's look at some pseudo-code:
When divA is scrolled -> scroll divB to the same spot
When divB is scrolled -> scroll divA to the same spot
The problem is that when you scroll divA or divB to the same spot, it will also cause the when to happen again.
So for example, when you scroll divA, this is what happens:
scroll divA -> scroll divB to the same spot -> scroll divA to the same spot
This causes divA to stick to the same spot after scrolling a little, and thus what causes the sluggish effect in firefox.
A solution is to ignore scrolling events when you scroll:
$(document).ready(function() {
var ignore = false;
$("#contentDivA").scroll(function() {
var tmpIgnore = ignore;
ignore = false;
if (!tmpIgnore && $("#chkSyncEnabled")[0].checked)
{
var scrollPos = $("#contentDivA").scrollTop();
scrollTop($("#contentDivB"), scrollPos);
}
});
$("#contentDivB").scroll(function() {
var tmpIgnore = ignore;
ignore = false;
if (!tmpIgnore && $("#chkSyncEnabled")[0].checked)
{
console.log("here");
var scrollPos = $("#contentDivB").scrollTop();
scrollTop($("#contentDivA"), scrollPos);
}
});
function scrollTop(el, position) {
ignore = true;
el.scrollTop(position);
}
});
Example
Is it possible via Javascript to store how far a user has scrolled while on page (pixel-wise), regardless of where they are at any time?
For example, I'd like to track how far someone scrolled before going back up to do a specific action at the top of the page.
Thanks!
Simply save the scroll position if it's the lowest one, every time a scroll happens.
var maxScroll = 0;
$(window).scroll(function () {
var scroll = $(document).scrollTop();
if (scroll > maxScroll) maxScroll = scroll;
});
// maxScroll is at any time the lowest point of vertical scrolling on the page.
You might want to debounce the handler for better performance.
I'm looking to refresh (reload) the page when the user's window size gets to 570px. I'm building a responsive website and need to do this (I haven't got time to go into detail about the why).
Basically, what I'm looking for is for the webpage to refresh ONCE when the window size crosses 570px width (once when it gets smaller, and once when it gets bigger).
I know this isn't ideal and it's something that should be avoided, but for this particular site, it will solve all my problems.
I would not do this myself, but you can use the following on page load (or document ready):
var threshold = 570;
var initialDiff = ($(window).width() > threshold) ? 1:-1;
$(window).on('resize',function(e){
var w = $(window).width();
var currentDiff = w - threshold;
if(currentDiff*initialDiff < 0) {
location.reload();
}
});
This works in both directions.
See this jsFiddle for an example where the indicator div is highlighted when the width crosses the threshold.
you can try this:
$(window).resize(function() {
if($(window).width()>570)
location.reload();//reload current page
});