On this page:
http://www.petertoth.me/stuff/petertoth_old/www.petertoth.me/index.html
there is a scroll down button, that smoothly scrolls down to the "next page". Anyone recognizes if it's a pre-made jQuery plugin, or a modified one? I've been researching about it quite a while, found out its possible to mimic this one more or less with such approach:
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
or
$('#gdb1').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 600);
return false;});
http://jsfiddle.net/uw1hdkaf/20/
but would be more than happy to know how to properly make it with jQuery or without it!
You need to factor in, that the elements need to have an exact height of how much you want to scroll down. Check out this example: http://jsfiddle.net/uw1hdkaf/22/
p {
height: 100px;
margin: 0;
}
The paragraph tag has a set margin of 16px, so you need to remove that. Basically making each element completely 0 in everything.
If you set the height to 100px and scroll down 100px using your script, it will guaranteed scroll down to the next element, as long as you make sure the elements are exactly as tall as you set them.
Related
I have problem in scroll to particular div (id wise),it's works well in desktop but not working mobile devices below (768 px).
I used this code for scroll but it's not working well in mobile.
// Scroll based on devices width
if ($( window ).width() <= 768 ){
$('body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
else {
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
Would you please give me the solution for the same ?
Thanks in advance
Ok so there is an issue where mobile webkit just doesn't do that. you COULD build your own animate function and rock an update of some low level prop but let's cheat a bit here.
Scrolling the body is an issue but scrolling a div is not. have a look at this pen.
https://codepen.io/infn8/pen/BYGvjz
This takes a single div, #body-wrapper, as an immediate child of the body and makes it the new window using these styles:
#body-wrapper{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
Then you can animate the scrolling on that. the -webkit-overflow-scrolling: touch; is what gives the ability to flick and scroll a bunch.
then you add the following JS
jQuery(document).ready(function($) {
$(".scroll-bottom").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-top").position().top}, 'fast');
});
$(".scroll-top").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-bottom").position().top}, 'fast');
});
});
Notice the swapping of .offset() for .position() this is important because with the overflow in the div the offset becomes incorrect. It's also important because the item you take the position of must have #body-wrapper as its offset parent (more info here) or the calculation will be wrong.
I have made my example scrollable with two buttons and a different layout than yours so it is a reduced test case scenario and nothing else is in the way. this way you can study this and extact the core concepts into your application.
a quick conversion of your original would look like this:
$('#body-wrapper').animate({
scrollTop: $("#current-job").position().top
}, 1000);
hopefully that helps
The one you have in the else block is fine on its own. Just reduce it all to:
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
and it will work. The key is animating both the html and body elements
I'm trying to display a div after scroll animation has finished and hide it when I scroll up/down the page. This is my attempt:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = parseInt($('#services').offset().top);
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
});
});
it doesn't work. the active class is removed after animation has finished and not with scroll movement.
Any idea?
Thanks in advance
Not exactly sure why, but apparently it takes the window somewhere around 20 milliseconds to exit the scroll state, at least on Chrome, on Windows. Or it might be a jQuery trick to fire the animation function 20ms sooner, so it feels more natural. (Human eye and mind make connections that take tiny amounts of time and maybe they took it into account).
Anyway, in order to make sure you bind after the scroll has ended, give it a full 100ms to finish and bind afterwards:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = 120;
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
setTimeout(function(){
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
},100)
});
});
working fiddle.
Please note I had hard-coded a value to position, as #services is not defined in my example.
Also please note that hiding events on scroll is a really bad idea in terms of usability. Users might want to scroll so they view the div better or read it in full, but they will end up hiding it, which would be annoying. I would at least check the scroll event for a minimum velocity or distance in order to hide an element from the screen.
I have a Div containing overflow text that I would like to scroll through with the click of a corresponding button. It's set to scroll 100 pixels in either direction. The function works fine when I use it don't use jQuery .animate.
$(function() {
$( "#upBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()-100);
});
$( "#downBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()+100);
});
But once I add .animate, I can only click the button once in either direction. It won't let me scroll down past the first 100 pixels.
$("#scroll").animate({ scrollTop: "100px" });
Any suggestions? I put together a codepen.
Yes that is correct behavior!
Why?
Because that is already at 100px so it doesn't scroll further than that.
What should be done:
You can get the current scroll top position and add 100px to it. Like below:
$("#scroll").animate({ scrollTop: $("#scroll").scrollTop() + 100 });
And same goes for other way up.
I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.
I'm using this code to use smooth scrolling in my website (demo):
$("#click-me").click(function(){
$('html,body').animate({
scrollTop: window.screen.availHeight
}, 200);
});
I'm trying to scroll so exactly the height of the page. However, it seems to scroll past this point. I've tried putting in "100%" as a value, but it didn't work.
What is causing this problem, and what should I do to fix it?
Thanks!
It's working correctly but unless you add this (or account for padding and margin on body), the result is slightly off.
body{
padding:0;
margin:0;
}
http://jsfiddle.net/bb9ux/2/ (non-working version: http://jsfiddle.net/bb9ux/3/ )
Scroll to particular div:
$("#click-me").click(function(){
$('html, body').animate({
scrollTop: $('#scroll-here').offset().top
}, 2000);
});
FIDDLE