JavaScript-“向下滚动”按钮-从着陆页滚动到标题顶部

Question

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);
    });
}

Answer 1

The target of your link is #section5 it should be #menu-main
Hope this helps.

EDIT
If you want to scroll try this

$('#section5').click(function (e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#menu-main").position().top
    }, 1000);
});

SYA :)