I'm having a bit of trouble getting a one-page scroll to behave the way I want it to. I would like the first to be full page and when they scroll down, it will full page scroll to the next element. But when they reach the 2nd section element - it will revert to regular scrolling behavior. This is because the rest of the page is not full page or one page.
I basically want the intro to be a full page, and then do a full page scroll into the next section where they can freely scroll down normally. When they scroll back up to the first section it should full page scroll again to the intro.
I'm using the below code. This is working for the full page transition into section 2, but I can't figure out how to revert to normal scrolling behavior after they reach section 2.
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});
To hide scrollbars of the browser (and thus to have the look of full page) apply overflow:hidden css-property to body like
$(document.body).css('overflow', 'hidden');
When you scrolled down via javascript to a section where the user should be able to scroll with standard scrolls just let scrollbar-handling be done automatically again by
$(document.body).css('overflow', 'auto');
So apply the first javascript-snippet whenever you scrolled via javascript to a fullpage view apply the latter everytime you scrolled to a normal scrollable section again.
Related
My page is divided into sections, each section is a div in the size of the screen (100%).
Every section must have a button to scroll down a full screen to the next section.
I am able to scroll one window down, without completely understanding what I do, and how to be able to keep scrolling to next section from every given section.
function nextButton() {
$('html, body').animate({
scrollTop: $(window).height()
}, 1000);
}
That parameter scrollTop is the value determined by calculating the height from top of your browser to the point you want to scroll to.
In the code you provided you are scrolling down for 1 window height by $(window).height() so if you want to scroll to next section (I assume each section has height equal 1 window) you need to multiplies it.
function scrollToSection(sectionNumber) {
$('html, body').animate({
scrollTop: $(window).height() * sectionNumber
}, 1000);
}
// so if you want to scroll to your first section you call this
scrollToSection(1) // and so on
Define a common class your divs (ex: sections)
// Maintain the current div where the last scroll was performed
var index = 0;
function nextButton() {
index += 1;
var divSections = $('.sections');
// Check to see if more divs exist
if (!divSections[index]) return;
$('html, body').animate({
scrollTop: divSections[index].offset().top
}, 1000);
}
You can just use some jQuery smooth scrolling by adding IDs to each div element:
$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");
Adding an event listener for a click or a scroll, and using this as the event handler, will give you what you want.
Try to give each div an id and your button add a anchor tag and reference it in which div you want to target. Then to have animate effect on your CSS add scroll-behaviour: smooth.
<div id="#section-one"></div>
<div id="#section-two"></div>
<a href="#section-one" class="button"/>
<div id="#section-three"></div>
<a href="#section-two" class="button"/>
html {
scroll-behavior: smooth;
}
My problem is, that after fast scrolling down with the touchpad, the window is correctly jumping to the top after 300px, but after that, the browser is stil scrolling down.
Here is a example of my problem
https://codepen.io/anon/pen/XoMExW
I´ve tried this, but it didn´t work
How to disable scrolling temporarily?
$(window).scroll(function(){
if( $(window).scrollTop() >= 300 ){
$(window).scrollTop(0);
}
});
What you could do is after each scroll event, add a setTimeout. For every scroll event, you will first clear the one you created in the previous event and recreate a new one right after. This will keep running until you reach the last scroll event, then during this last scroll event, the callback of the setTimeout will be triggered and it will run your code:
var isScrolling;
$(window).scroll(function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
if ($(window).scrollTop() >= 300) {
$(window).scrollTop(0);
}
}, 100);
});
I'm trying to freeze scroll at a div position till user click, hover another div. After user action, scroll should be released and work normally! But it doesn't work! How can I make scroll work normally after user hover, click on this div? Here is the full code for reference: https://jsfiddle.net/tqwr3hrp/ (tested on chrome)!
<div class="stopscroll">click/mouseover here to stop</div>
<div class="likebox"></div>
$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
});
$('.stopscroll').on('tap click mouseover', function(e) {
$(window).off('scroll');
//another attempt
$('html, body').off('scroll');
//and another attempt
$('html, body').stop().animate();
});
This code makes that your page actually scrolls automatically:
function start_scrolling() {
$('body').animate({
scrollTop: $('body').height() - $(window).height()
}, 10000, 'linear');
}
start_scrolling();
This code lets the scrolling stop if you hover your div and lets it start again if you unhover it. Instead of doing the same with click I recommend adding a checkbox, which I did in this example. If the checkbox is checked, scroll as usual, if not, let the user scroll himself.
$('.stopscroll').mouseover(function() {
$('body').stop();
}).mouseout(function() {
if($('#autoscroll').is(':checked')) {
start_scrolling();
}
});
This last code is a bonus and lets the user take control immediatedly: If the user scrolls, the autoscroll is deactivated. If he wishes to enable the autoscroll again, he can use the checkbox.
$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
$('body').stop();
$('#autoscroll').prop('checked', false);
});
JSFiddle
I replaced the scrolling animation of my one page website with another scrolling animation which changes the URLs when you use the topbar (it was build in foundation)
While the URLs now change when I click an item in the topbar all the other links or clickable elements on my page make it scroll back to the top of the page.
For example when I try to click the next/prev buttons of my slider it scrolls back to the top of the page as if I clicked on Home.
Can someone see whats wrong with the code for the animation?
$(document).ready(function () {
$('a[href^="#"]').click(function () {
var target = $(this.hash),
hash = this.hash;
if (target.length == 0) {
target = $('a[name="' + this.hash.substr(1) + '"]');
}
if (target.length == 0) {
target = $('html');
}
$('html, body').animate({
scrollTop: target.offset().top
}, 500, function () {
location.hash = hash;
});
return false;
});
});
PS: When I scroll manually the URLs don't change when I go down to the next page. If anyone has a fix for this I'll be happy to here from you! (I tried using history.js but that only seems to work if you have a server, which I don't)
//* EDIT *//
I just found out it's not all links that make it scroll to the top of the page, just the buttons of my orbit slider and the menu button when the topbar is collapsed
//EDIT 2//
The URL now changes when I scroll to the next page!
The only problem I am seeing right now is that the buttons of my orbit slider and the menu button of the collapsed topbar act the same as my home button (makes the page scroll all the way back to the top) for some reason.
So the last thing I need to do is get the buttons working again. Making the menu button expand the topbar and making the next and prev buttons of my slider work as normal
If you only want to change the hash depending on the scrollPosition you are half way there.
You'll need to bind some logic to the scroll event. Here is a fork of your Fiddle where the hash is changed on scroll.
When the user scrolls the page we iterate through all .page elements and compare their offset().top against $( document ).scrollTop().
We set the new hash to be the id of the last .page element that has a lower offset().top than $( document ).scrollTop() is.
(I also debounced the function so it doesn't fire constantly when scrolling - you could of course remove that part)
You should however consider that by changing the hash you will jump to the equivalent element. Here is a guide on how to suppress that behaviour.
EDIT:
Here is an updated Fiddle where I implemented the solution from above for suppressing forced scroll on hash change.
Want to implement infinite scroll based on mouse scrol when it reaches the specified container bottom. I came to this plugin after searching http://www.infinite-scroll.com/ which needs the following basic requirements:
// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
i.e next and previous selectors. Can we have infinite scroll based on mouse scroll instead of clicking next, prev links i.e when mouse reaches the specified container bottom load the content via ajax
Add a function to the scroll event and check if you scrolled down to the bottom.
you have to adjust numbers and tweak the code a bit according to your layout:
var $window = $(window);
$(document).ready(function () {
$(window).scroll(function () {
var scrollheight2;
scrollheight2 = $window.scrollTop();
if (($("#content").height() - scrollheight2) <= 100) {
//AJAX STUFF
}
});
});