Here is the javascript code for scrolling down the page :
function down() {
var scrolled=0;
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
It works fine but it only works one time. If I click again it won't work. How can I find the way so this work as long as I click?
Any help will be appreciated.
You're using a constant (1000) for where to scroll to the page. Once you hit 1000 pixels from the top, telling it to scroll there again will do nothing.
Are you trying to scroll 1000 px from wherever you're at? To do that, you need to use the scroll distance:
var scrolled = window.pageYOffset;
since you're using jQuery you can also use
$(window).scrollTop();
You’re always scrolling to the same position (1000). Whenever you call down(), you set scrolled to 0.
You’ll need to define the scrolled variable outside the function scope.
Example:
(function () {
var scrolled = 0;
function down() {
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
$('#scroll').click(down);
}());
(Assuming your button or link element that should trigger the scroll has the ID scroll)
If you wаnt scroll +1000px whenever you call down, try this:
var down = (function() {
var scrolled=0;
return function() {
scrolled += 1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
})();
Related
I've got 2 div's (left div and right div). They are separated by half. On the right div you can see some pictures and on left side, there are information, which could be longer on some days that's the reason why I want to let it autoscroll to the bottom and back to the top.
I got already a Script but my version is scrolling the whole website.:/
My question: where is my mistake?
setInterval(function(){
$("html, body").animate({ scrollTop: $("leftdiv").height() }, 10000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 8000);
},1500);
},1500);
https://jsfiddle.net/4gLts2f0/5/
I found a script which can scroll down.:) But I got still a problem: I do not know how I can let him jump back to the top and repeat the process
https://jsfiddle.net/4gLts2f0/7/
Try $("leftdiv").animate({ scrollTop: $("leftdiv").height() }, 10000);
scrollTop is a tricky properties to play with, i personally solved a similar issue calculating the offset from the top of the page with this function:
function getDistanceFromTop(element) {
var yPos = -100;
while(element) {
yPos += (element.offsetTop);
element = element.offsetParent;
}
return yPos;
}
after that i suggest try to use the scroll function from the specific target until you reach the specific point.
Hi I am trying to write a function that horizontally scrolls a div to a specific point given a parameter. Everything functions properly except when the document/body is scrolled down and the function is executed by pressing a letter. When this happens the whole document/body is scrolled up to the top. I really can't figure out what I am doing wrong here but I don't want the page to scroll to the top.
an example of the code can be found at http://www.hokosounds.com/testRedesign/store-test.html#
Thanks for the help!
$(document).ready(function(){
$('a').click(function(e, _letter){
e.preventDefault();
var _letter = $(this).html();
scrollToLetter(_letter);
});
scrollToLetter = function(_letter) {
var _distance = $('#'+_letter+'Start').position().left+$('#store-nav-artist-names').scrollLeft();
$('#store-nav-artist-names').animate({
scrollLeft: _distance
}, 800);
};
});
The page will scroll to the top if you don't handle the click event to either return false or event.preventDefault http://api.jquery.com/event.preventDefault/
It will stop the behavior of a link being clicked.
I need to make my current web page always refresh to the top of the page.
Currently it refreshes to the bottom.
What code might I use and where would I place it?
Here 's how you can do it with jquery:
$(function() {
$('body').scrollTop(0);
});
or with javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
You can set scroll head to the desired level by assigning the element head to the scrollTop on load.
eg:
$(window).load(function() {
$('html, body').animate({scrollTop: $(".first-section").offset().top}, 2000);
});
So you can use the first div's id or class to scroll it up on top every time you reload the page.
It's as simple as inserting document.body.scrollTop = 0 as the first line of you document load function.
$(function() { // same as $(document).ready(function() {
document.body.scrollTop = 0; // |OR| $('body').scrollTop(0);
/* do work */
})
I've a function that scrolls my Index page to a specific anchor tag and changes the background image. The problem I have right now is that I need to use the links in my Menu page to move to the anchors in my Index page and change that background image. My Menu Page appears at the top of my index page.
The Javascript I have for scrolling inside my Index page is:
$('-Button-to-scroll-is-clicked').click(function () {
clearInterval(ID);
$('html, body').animate({
scrollTop: $('-Anchor').position().top
},
3000);
var IntID = setInterval(changeImg, 1500);
function changeImgHome() {
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
};
ID = IntID;
return false;
});
The Javascript that I have for scrolling my index page from my Menu page is:
$('-Button-In-Menu-Page').click(function () {
$('html, body').animate({
scrollTop: $('-Anchor-In-Index-Page').position().top
},
3000);
return false;
});
As I've said, I need to check in my Index page the position I'm at after scrolling (using the window.scroll function) so I can change the background image appropriately.
Well, first, position gathers the position of the element. By default, elements are placed inline and have a static position and no position coordinantes, so using .position().top will fail to yield the page position unless you've placed all of these things in absolutely.
That's not a problem though, because we have .offset. Offset tells you the x and y positions of the target relative to the document, so we'll use that.
Now our functions should look like this
window.onready = function(){
$(-Button-to-scroll).on('click',function(){
var itemPos = $('target').offset().top;
$('body,html').animate({scrollTop:itemPos},3000);
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
}
EDIT: for your scrolling. This isn't the most efficient way of doing it since it will basically keep rewriting your background image every time the user scrolls.
$('html').on('scroll',function(){
var top = $(this).offset().top
if ((top >= 200)||(top <= 300)){
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
});
Your current position on the page can be retrieved with $(window).scrollTop().
I'm using a nicescroll a plugin that I use to create scrollbars on divs.
$('#postscroller').niceScroll();
var nice = $("#postscroller").getNiceScroll()[0];
$('#postscroller').bind("scroll",function()
{
if(nice.scrollvaluemax==nice.scroll.y)
{
alert('bottom');
}
alert(nice.scroll.y);
});
First I activate the div to be scrolled.
Then I save the nicescroll instance to the nice variable.
When I test the scroll event to see wether the scroll.y is being fired when I scroll to the bottom I get some numbers but not 134 which is nice.scrollvaluemax in the div I'm testing.
I do get however 134 when I'm at the bottom and I scroll upwards.
Any idea on how can I get 134 when scrolling to the bottom?
Thanks
you get other numbers because you are not at the bottom when you scroll down...
probably related to your current position when the scroll is fired.
post more code.
I fixed it by calling this at the scroll event
var postscrollertimer = (function() {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function()
{
if(postscroller.scrollvaluemax==postscroller.scroll.y)
{
//do stuff
}
}, 1000);
};
})();