I want to write an Jquery or JS script to scroll down a given page if it has the vertical scrollbar. This is to automate the web page navigation using the mouse wheel, so I should be able to animate it with time.
I was reading the web but seems that to do something like this you need to know an element name. Is it possible without knowing any element name? Something like $(document).scrollDown(speed)?
You could animate scrollTop property of html and body elements, like this:
$(window).load(function() {
$("html, body").animate({ scrollTop: yPosition }, 1000);
});
In this snippet, yPosition represents the height you want to reach, and 1000 controls the speed.
To detect if the page has a vertical scroll bar you could do:
if((document).height() > (window).height())
{
$('html').animate({scrollTop : ((document).height()},'slow');
}
Related
I am trying to do a effect like on the App Builder Website.
When the user is at the header with the background image/video and scrolls down, the site scrolls down to the next div/section/etc. .
If the user scrolls back up and the image/video part is reached, the page scrolls to the top of it. I have tried the following code but there is bug i can't find:
function scrollto(where){
$('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
console.log('Scrolled to ' + where);
closeMenue();
}
var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (scroll == 0){
scrollto('.about');
}
else{
}
} else {
if (scroll == 530){
scrollto('.parallax');
}
else{
}
}
lastScrollTop = st;
});
It is working fine, but only once. Is there a Plugin I can use?
Sorry for my bad english :(
The site you posted is making use of fullPage.js plugin.
It works using CSS3 transitions with a fallback to jQuery when needed.
If you don't want to use jQuery, there's even a pure javascript version for it in development but functional.
dont use jquery for smooth transitions.
is better do that things with css methods.
check this if want use any library
So, here's what I believe I'm seeing on their site if you want to do something similar:
No scroll bar; you'll need to make your top-most container have overflow: hidden. It might be best to capture scroll wheel events. See here for more details: Get mouse wheel events in jQuery?
The active viewport gets a class "active". They're presumably using it to keep track of which viewport to scroll to next and maybe to determine
So, in your scroll wheel event handler, you'll need to:
Determine first if you're going up or down. (Outlined in the SO link above)
You'll need to find the next sibling div/viewport/container/whatever that's not active.
You'll want to move the active class to that appropriate sibling (previous/next depending on up/down) and scroll it into view using scrollTop.
I have a div with a fixed height and overflow-y : scroll which I am loading via ajax. I'm currently looking for a possibility to scroll the content inside the div (using the mouse wheel) but without displaying the scroll bar. Can anyone help?
Another way is to use jquery.mousewheel : https://github.com/brandonaaron/jquery-mousewheel
On mouse wheel, compute scroll urself :
$('.toScroll').on('mousewheel',function(event, delta, deltaX, deltaY){
if(!$(this).attr('data-scrolltop')){
$(this).attr('data-scrolltop',0);
}
var scrollTop = parseInt($(this).attr('data-scrolltop'));
scrollTop += (-deltaY * lineHeight);
$(this).attr('data-scrolltop',scrollTop);
$(this).scrollTop(scrollTop);
});
I made a Fiddle as a demonstration :
http://jsfiddle.net/W2pZB/
The only problem is about the var-fixed line height.
You can do it by applying overflow:hidden and after display-none on the scroll-bar using css
And here you can find a same thing in below question .
jQuery: How do I scroll the body without showing the scroll bar?
I have html elements with id's assigned. Now I want to scroll to those elements. I see jQuery has a scrollTop which takes an integer value.. How do I easily just make a particular html element with an id scroll to the top? Ideally, with nice and smooth animation.
A quick search showed many scrolling plugins... if a plugin is needed for the above functionality, what's the most popular one? I'm also using jquery-ui.
You could use something like this to scroll to #someElement when the page loads:
$(document).ready(function() {
$("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000);
});
It simply animates the scrollTop property of the body element, and uses the top offset of some specific element as the position to scroll to. The animation lasts for 1000ms.
Note: it selects both html and body so it works across browsers. I'm not sure on the specifics, but some quick tests show that Chrome uses body, but Firefox and IE use html.
Here's a working example.
Consider the following snippet:
$('#myDiv').bind('click',function(){
var pos = $(this).offset().top,
scrollSpeed = 2;
for (var i = pos; i > 0; i=i-scrollSpeed) {
$(window).scrollTop(i);
}
});
It scrolling was binded to #myDiv element on click just for example. Code determines a position of #myDiv element, than calculates number of scroll steps (speed/smoothness). Than does jQuery .scrollTop() thing.
Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!
You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');
I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.
See the scroll event and the scrollTop method.
you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});
I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section?
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo
You can use scrollLeft and offset() to determine what to scroll to:
A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):
$(".next").click(function(e){
$('html, body').animate({
scrollLeft: $(this).closest('td').next().offset().left
}, 1000);
e.preventDefault();
});
I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.
If you didn't want the animation you could do it this way:
$(".next").click(function(e){
$('html, body').scrollLeft($(this).closest('td').next().offset().left );
e.preventDefault();
});