The site I'm working on has a "mandatory" Header at the top they won't let me remove. My workaround for this was to start the window scroll below that header with a body onLoad event, like such:
<body <?php body_class(); ?> onLoad="window.scroll(0, 100)">
The issue comes up as I'm working on the sites responsive elements. When the screen hits the 400px media query, I hide that div entirely. Which means my site is still scrolling 100px down needlessly.
Is there a way to Change that window.scroll event to NOT scroll down, (or to scroll down less if they make me put the header back on mobile, albeit smaller) based on that media query?
You can play around with this fiddle
JAVASCRIPT:
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 1000);
});
Basically it scrolls to the element you want to show so if the header is not present the #content top will be 0 so it won't scroll.
Alternatively, you could use the code below which will scroll the site accordingly to the header's height. No header = no height = problem solved.
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#header").height()
}, 1000);
});
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 came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?
Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);
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 have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.
I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/
I try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.
You might want to change your HTML. There can be only one id per page.
In the given fiddle, you have a repeating <div id="one">
Now, to get the scroll working, you could do something like this :
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
var hash = $(this).attr("href");
//console.log($(hash).position().top);
$('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
});
});
Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).
Here is a fiddle