I have the following script and page layout - http://jsfiddle.net/wLkYg/ that allows the user to scroll up and down on my website, with a neat little javaScript swing effect.
However, as I would like to now arrange the content (colored #div boxes from the jsfiddle example above) to be next to each other/side to side, it loses the scrolling effect - http://jsfiddle.net/UjeZH/.
How would I be able to achieve the same transitions in second example, as it is in the first?
I have two versions of what you need already made up for you.
Version 1: Divs on top of each other
Version 2: Divs on top and next to each other
Check them out and tell me if they suit your need.
Both versions are designed in a way so each div will have your page's height and width.
The first version doesn't have the swing effect but you can add it by:
Including jQuery
Adding the following JS ( the same as the second version )
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Also if you use the above code, it will fix your problem, as it allows you to scroll vertically and horizontally. The code that you have allows you to scroll only vertically that's why it is not working when you align your divs horizontally.
document.body.addEventListener('wheel', function (e) {
console.log(this.scrollLeft)
e.preventDefault()
if (e.deltaY > 0) {
this.scrollLeft += 10
} else {
this.scrollLeft -= 10
}
})
set css and test it
html,body {width: 2000px; height: 200px; background: orange}
same as it,you can get event by another element.
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;
}
I have a situation where I need the page to not be scrollable past a certain point (I have the hero set to 100vh and the user should not be able to scroll at all) and then upon click of a button the scroll prevention is disabled and the user is then automatically smooth scrolled down to an anchor link directly below (basically scroll down 100vh or the full window height). I need a smooth scrolling animation instead of just a quick jump.
I've tried playing around with variations of the following code with no luck. So far it is really buggy and jumps around and when you reload the page the body overflow is set to hidden but the window position is not always at the top of the screen so you still see some of the below the fold content but still cant scroll.
function() {
function smoothScroll(){
windowHeight = $('window').height();
$('html, body').stop.animate({scrollTop: windowHeight}, slow);
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
};
Fiddle is here: https://jsfiddle.net/njpatten/yxkvnymu/1/
Fixed Code
function smoothScroll(){
windowHeight = $(window).height();
$('html, body').stop().animate({scrollTop: windowHeight}, "slow");
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
Fixed fiddle: https://jsfiddle.net/yxkvnymu/2/
Explanation
You are trying to get the window height by doing $('window').height() which is searching for a 'window' DOM element which doesn't exist. You want to use $(window).height() (note the omission of quotes surrounding window) because window is not a DOM node, it is an object.
In addition, you are using $('html, body').stop.animate({scrollTop: windowHeight}, slow); which has multiple errors. .stop is invalid because the stop property on the NodeList that is returned from $('html, body') is a function that you want to call. You should be using $('html, body').stop().
Also, the animate portion is referencing a variable slow. jQuery's animate function takes "slow" as a string, so that line should be written as such:
.animate({scrollTop: windowHeight}, "slow");
Note the inclusion of quotes on that because we want to pass a string value of "slow" to jQuery's animate function, instead of a variable slow.
Lastly, you are surrounding all of your code in an anonymous function, which seems unnecessary.
Finishing up a parallax, one page site and I've got a fixed nav, so I have to offset the various div's / sections on my page so they don't get cut off on top. Problem is performing this for different browser widths, since my fixed nav will be about half the height on mobile as it is on desktop.
Trying this jQuery out and it only seems to perform the else action, not the if. So the offset is too much on mobile. Here's what I'm currently using:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://example.com/#"]' ).click(function() {
if (jQuery(window).width() < 677) {
jQuery.scrollTo( this.hash, 1000, { easing:'swing', offset:-20 });
} else {
jQuery.scrollTo( this.hash, 1000, { easing:'swing', offset:-141 });
}
});
});
</script>
I think this will provide a more responsive solution:
$(document).ready(function() {
$.resizeContentHeight = function(){
$('#main-content').css("margin-top", $(".header-fixed").height());
}
$(window).load(function() {
$.resizeContentHeight();
});
$(window).resize(function() {
$.resizeContentHeight();
});
});
In this JSfiddle I calculate the height of the .header-fixed and apply that as a margin-top to the content below it (#main-content). I think this is what you are trying to achieve right? I have tested this and modified it to work across multiple browsers. Not sure if this will be relevant in a parallax site if you could provide examples of the HTML you are working with it would help. This will also adjust if the user changes the orientation of their device.
This could also be adapted to add or remove the height of the header to the anchor links.
I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});
Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle
It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.
The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.