I want to scroll effect like these pages
http://www.hugeinc.com/ (After three slide) - http://stadiumtechcenter.com/building
For example I have a slider area and when I scroll down it's going to menu. After that standart content block is starting. Now I want to when I scroll up and menu reach the browser top site automaticly jump to page top.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
divOffset = $('.bottom').offset().top,
dist = divOffset - scrollTop;
if (dist > 0) {
$('html, body').stop().animate({'scrollTop':$('.top').offset().top}, 300);
}
});
Here is the fiddle
http://jsfiddle.net/zB5bc/
Maybe you can try something like this:
$(window).on('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0){
$('html, body').stop().animate({'scrollTop':$('.bottom').offset().top}, 300);
}
else{
$('html, body').stop().animate({'scrollTop':$('.top').offset().top}, 300);
}
Here is working example: http://jsfiddle.net/zB5bc/4/
Related
I am using a slider on my web page for that i used jQuery Function
to scroll down
jQuery("#downClick").click(function() {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, "slow");
});
to scroll up
jQuery("#upClick").click(function(){ //Click event to scroll to top ==>> Slider
jQuery('html, body').animate({scrollTop : 0},800);
return false;
});
My page is having too much data to display, so when a person clicks on this buttons either he navigates to bottom or top in once.
Does anybody can suggest me how can i change to something like if i want to scroll up it will scroll up with multiple steps not in once.
$('#upClick').on('click', function() {
var scrollIndex = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
}
refer this!
I am using the following jQuery:
$(".car-hub-header-help").click(function() {
$('html, body').animate({
scrollTop: $(".footer").offset().top
}, 2000);
});
At the moment this will scroll down the page and when the top of the viewport reaches the element it will stop, however I would like the viewport scroll until the bottom of the viewport is inline with the element that I am targeting.
So far I have tried changing top to bottom and that didn't work, any help would be much appreciated.
document.getElementById("div1").scrollIntoView(false);
The idea is to scroll till the element is present at the bottom of the page.
The scroll position from the top = offset position of the element from the top - current window height + height of element
The code will look like
$(".car-hub-header-help").click(function() {
var elTopOffset = $(".footer").offset().top;
var elHeight = $(".footer").height();
var windowHeight = $(window).height();
$('html, body').animate({
scrollTop: elTopOffset - windowHeight + elHeight
}, 2000);
});
Try this please:
$(".car-hub-header-help").click(function() {
$('html, body').animate({
scrollTop: $(".footer").offset().top - $(".footer").height() + $(window).height()
}, 2000);
});
at the website klangmanufaktur.de we have a horizontal scrolling design (on desktop screens). However, on some subpages there are large background images and scrolling is not smooth at all (when clicking the horizontal arrows):
www.klangmanufaktur.de/impressionen/
This is especially true for Safari.
The images are loaded using tags, but are changed to background images within a large using DOM manipulation with jQuery. There are to issues:
1. No smooth scrolling
2. Background images load only when scrolled into the viewport, so for a short moment, the black background is visible
Here is the code for horizontal scrolling on arrow click:
// horizontal scrolling on arrow click
$('.horizontal-arrow.right').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$('.pagebox-inner').each(function(){
if($(this).offset().left>window.pageXOffset + $(window).width() - $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
$('.horizontal-arrow.left').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$($('.pagebox-inner').get().reverse()).each(function(){
if($(this).offset().left<window.pageXOffset + $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
And here is the code for scrolling when a submenu link is clicked, like here:
www.klangmanufaktur.de/restaurierung
// horizontal scrolling of anchor links
$('nav.main-navigation li a').each(function(){
if($(this).attr('href')!=$(this).attr('href').replace('#','')) {
$(this).click(function(){
currentMainHash = window.location.hash;
var linkUrlSplit = $(this).attr('href').split("#");
var currElem = $('#post-'+linkUrlSplit[linkUrlSplit.length-1]);
if(currElem) {
if($(window).innerWidth()>767) $('body,html').animate({ scrollLeft: currElem.offset().left - $('header.site-header').outerWidth() }, 2000,'swing',function(){ scrolled = false; });
else $('body,html').animate({ scrollTop: currElem.offset().top }, 2000,'swing',function(){
scrolled = false;
$(this).blur();
});
}
$('.currentLink').removeClass('currentLink');
$(this).addClass('currentLink');
});
}
});
Any suggestions how to resolve the "unsmooth scrolling" issue here? Is it maybe helpful do display the images as elements instead of background images?
Thanks for your help!
Kind regards
joschi81
i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri
Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});
I've been working on a website with a mobile version that has a fixed header, and I want to get the same effect while scrolling down to hide the navigation, only to reveal it when you scroll up more than 5 pixels.
Just like teehanlax.com. I've given a it a shot using some code I found online, but it behaves strangely. It's hiding on scroll down, but only reveals again, seemingly... randomly.
Here is my code.
//Hide Header on on scroll down
$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// Scroll Down
$("header").delay(100).queue(function() {
$(this).addClass("animated fadeOutUp");
$(this).dequeue();
});
} else {
// Scroll Up
$('header').delay(100).queue(function() {
$(this).removeClass("fadeOutUp").addClass("animated fadeInDown");
$(this).dequeue();
});
}
lastScrollTop = st;
});
});
The JS you posted looks pretty sound, it might be more of a CSS issue. Can you post the CSS that goes along with this?