I have this JavaScript that let me scroll the page up / down by clicking on the top / bottom of the page.
$(function() {
$("#next").on("click", function() {
$("body").animate({"scrollTop": window.scrollY + (window.innerHeight - 60)}, 100);
return false;
});
});
$(function() {
$("#previous").on("click", function() {
$("body").animate({"scrollTop": window.scrollY - (window.innerHeight - 60)}, 100);
return false;
});
});
Have a look at the JSFIDDLE here:
https://jsfiddle.net/cztqjwb2/3/
Any idea how to make it cross-browser?
Some browsers attach the scrollbar to the body, other to the html element.
You'd make it cross browser like this
$("html, body").animate( ....
To make it work in older IE as well, you have to replace scrollY with something, jQuery seems like the obvious choice
$("html, body").animate({
scrollTop: $(window).scrollTop() + $(window).height() - 60
}, 100);
Related
I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.
function scroll(element, speed) {
element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
});
}
setTimeout(function() {
scroll($('html, body'), 900000)
}, 3000);
I was able to solve it using a more simple method:
window.onload = function () {
var Delay = $(document).height() * 65;
var DelayBack = $(document).height() * 5;
function animateBox() {
$('html, body')
.animate({scrollTop: $(document).height()}, Delay, 'linear')
.animate({scrollTop: 0}, DelayBack, animateBox);
}
setInterval(animateBox, 100);
}
I feel like your issue is related to this line...
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
Try changing it to the following to make it a callback and not an immediate invocation:
$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });
fetch data using php and ajax apply scroll function to window event
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getdata.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});
I started learning JavaScript a few days ago and I'm enjoying it so far.
Today I've been given a task where I need to add a scroll down function to an element when a button is clicked, but only if the screen width is less than or equal to 699 pixel. I've finished a webpage, and I just need to add the JavaScript for it.
This is the script snippet I have at the moment:
$(document).ready(function (){
$("#button").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
//});
});
});
And I need to add this:
if (screen.width <= 699)
How do I add the if statement to the script above? Also is there an easier way of doing this?
Thank you very much for your time,
$(document).ready(function (){
var screenWidth = $(window).width();
$("#button").click(function (){
if (screenWidth <= 699){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
}
//other stuff your button does on all views
});
});
I recommend setting mobile to 480px and tablet to 768px.
Use this
var width = $(window).width();
if(width < 699) {
//your script
}
I'm having a bit of trouble with adjusting the code according to window width. If the window width is less than 450, I want it to scroll to a certain part, else another. Where am I going wrong?
$('.artist-kina').click(function( e ){
e.preventDefault();
$('html, body').animate({
if ($(window).width() < 450 {
scrollTop: $('#artists').offset().top - 60
}
else {
scrollTop: $('#artists').offset().top - 115
}
}, 500);
$('.artists-home').fadeOut(function() {
$('.kina-gallery').fadeIn('slow');
});
});
The parenthesis was a problem, but in a larger sense the syntax is just completely wrong:
$('html, body').animate({
scrollTop: $("#artists").offset().top - (
$(window).width() < 450 ? 60 : 115
)
}, 500);
You can't just drop an if statement into the middle of an object literal. You can, however, use the ? : operator to make a choice between values as part of an expression.
Now be aware that fooling around with the scroll position of the <body> may or may not work in all browsers. Safari used to have a problem with that; it may work in more modern versions of the browser.
There were several issues with the way that you nested the code, but the largest issue was the Animate call.
This should work:
$('.artist-kina').click(function( e ){
e.preventDefault();
if ($(window).width() < 450) {
$("html, body").animate({
scrollTop: $('#artists').offset().top-60
}, 500);
}
else {
$("html, body").animate({
scrollTop: $('#artists').offset().top-115
}, 500);
}
$('.artists-home').fadeOut('slow', function() {
$('.kina-gallery').fadeIn('slow');
});
});
Here is a working jsFiddle: http://jsfiddle.net/yy1v940u/5/
below is the code I have for scrollTop. It works fine when I target a specific pixel, but I want to scroll down 300px, instead of scrollTop a certain div on click. can anyone help?
<div id="button"></div>
<div1 style="height:300px;">img1</div>
<div2 style="height:300px;">img2</div>
<div3 style="height:300px;">img3</div>
<div4 style="height:300px;">img4</div>
$(function() {
$("#button").on("click", function() {
$("html, body"). animate({"scrollTop":$().offset().top-300}, 1000);
return false;
});
});
Try using window.scrollBy(0,300);
$().offset().top doesnt do much of anything. Replace it with window.scrollY
$(function() {
$("#button").on("click", function() {
$("body").animate({"scrollTop": window.scrollY-300}, 1000);
return false;
});
});
Also negative is up and positive is down when we're talking about scrolling so you probably want to add 300 instead.
I think it's the best way.
var body = $('html, body');
$('#button').click(function() {
var n = $(document).height() - $(window).height();
body.stop().animate({scrollTop: n }, 1000, function() {
});
});
I am dynamic appending data to div using ajax when window scroll end and for that i have used scroll event as below.
$(window).scroll(function(event){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert("scroll");
}
});
above code is working fine in all browser but not working in IE 8.
for IE8 it through scroll event but will not entered in if condition some how.
can you try this?
$('html,body').animate({ scrollTop: 0 }, 5000, function() {
//callback function here
});
I have used this condition in scroll event like this :
var down = $(window).height() + 300;
if ($(window).scrollTop() > $(document).height() - down){
and now it is resolved.
Thanks.