I'm using the same "scroll down" method that's being used here:
https://codepen.io/nxworld/pen/OyRrGy
Of course, the JavaScript in that example doesn't take you to a specific place on the page - it just takes you to the next section. What I'm trying to do is, instead of the "scroll down" button taking us from here:
to here (this is what's happening currently):
we want the scroll down button to take us to where the top of the header touches the top of the browser's window (like this):
Here is what I currently have in my JS file:
//javascript functions
(function ($, root, undefined) {
$(function () {
'use strict';
// DOM ready, take it away
});
})(jQuery, this);
//landing page text delay
window.onload = function() {
$("p").each(function(index) {
$(this).css({
'animation-delay': (index + 1) * .7 + 's'
});
});
}
//scroll to top functions, found here:
http://plnkr.co/edit/DCnukHPNWa6Z1zOX53xp?p=preview
//scroll to top (linear)
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
//scroll to top (ease in and out)
function scrollToTop(scrollDuration) {
const scrollHeight = window.scrollY,
scrollStep = Math.PI / ( scrollDuration / 15 ),
cosParameter = scrollHeight / 2;
var scrollCount = 0,
scrollMargin,
scrollInterval = setInterval( function() {
if ( window.scrollY != 0 ) {
scrollCount = scrollCount + 1;
scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
}
else clearInterval(scrollInterval);
}, 15 );
}
//scroll down
(function($) {
$('a[href*=#]').on('click', function(e) {
console.log( $(".container").offset().top)
e.preventDefault();
$('html,body').animate({
scrollTop: $("#menu-main").offset().top - 6}, 1700);
//$('html, body').animate({ scrollTop:
$($(this).attr('href')).offset().top}, 900, 'linear');
});
})(jQuery);
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop:
$($(this).attr('href')).offset().top}, 500, 'linear');
});
});
window.onload =(function($) {
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#menu-main').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() >= stickyHeaderTop ) {
$('#menu-main').css({
position: 'fixed',
width: '100%',
top: '0px',
'z-index': 99999,
height: '45px'
});
$('#menu-main-navigation').css('margin-top', '-7px');
$('#logo').css({
'font-size':'40px',
'margin-top': '-20px'
});
$('#stickyalias').css('display', 'block');
} else {
$('#menu-main-navigation').css('margin-top', '0');
$('#logo').css({
'font-size': '50px',
'margin-top': '-15px'
});
$('#menu-main').css({
position: '',
top: '',
'z-index': 0,
height: '57px'
});
$('#stickyalias').css('display', 'none');
}
});
});
})(jQuery)
You can see that I already have multiple functions for scrolling to the top of the page (scrollToTop) and I figure I can use the same kind of logic to scroll down. Since my current scrollDown function isn't working properly, I tried to comment it out and instead write something like this:
//scroll down (ease in and out)
function scrollToHeader(scrollDuration) {
const scrollHeight = window.scrollY, //distance from scroll down button to the top of the header
scrollStep = Math.PI / ( scrollDuration / 15 ),
cosParameter = scrollHeight / 2;
var scrollCount = 0,
scrollMargin,
scrollInterval = setInterval( function() {
if ( window.scrollY != 0 ) {
scrollCount = scrollCount + 1;
scrollMargin = cosParameter - cosParameter * Math.cos (scrollCount * scrollStep);
window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
}
else clearInterval(scrollInterval);
}, 15 );
}
Then I applied that function to the scroll button in the HTML:
<section id="section5" class="demo">
<a href="#section5"><span onclick="scrollToTop(1000);"></span></a>
</section>
But when I tried this it caused the scroll button to shift to the left side of the page, and it actually took me up instead of down - so I re-commented out the function in my JS and got rid of the changes I made in my HTML (header-front-page.php). You can see how it currently works at thebullshitcollection.com. Thanks in advance for your help / suggestions.
EDIT: among other functions that I previously listed, this function has been added to my JS file:
jQuery(document).ready(function ($) {
$('#section5').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#menu-main").position().top
}, 1000);
});
}
