JavaScript - "Scroll Down"按钮 - 从着陆页滚动到页眉顶部

Question

我使用的是与此处相同的“向下滚动”方法:

https://codepen.io/nxworld/pen/OyRrGy

当然，该示例中的 JavaScript 不会将您带到页面上的特定位置 - 它只会将您带到下一部分。我想要做的是，而不是“向下滚动”按钮将我们从这里带走:

到这里(这是目前正在发生的事情):

我们希望向下滚动按钮将我们带到页眉顶部接触浏览器窗口顶部的位置(如下所示):

这是我目前在我的 JS 文件中的内容:

//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)

您可以看到我已经有多个用于滚动到页面顶部的函数 (scrollToTop)，而且我认为我可以使用相同类型的逻辑向下滚动。由于我当前的 scrollDown 函数无法正常工作，我试图将其注释掉并改为编写如下内容:

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

然后我将该函数应用于 HTML 中的滚动按钮:

 <section id="section5" class="demo">
    <a href="#section5"><span onclick="scrollToTop(1000);"></span></a>
</section>

但是当我尝试这样做时，它导致滚动按钮移动到页面的左侧，它实际上让我向上而不是向下 - 所以我重新注释掉了我的 JS 中的函数并摆脱了变化我在我的 HTML (header-front-page.php) 中制作。您可以在 thebullshitcollection.com 查看它目前的工作方式。 .在此先感谢您的帮助/建议。

编辑:在我之前列出的其他功能中，此功能已添加到我的 JS 文件中:

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

Answer 1

您链接的目标是#section5，它应该是#menu-main
希望这可以帮助。

编辑
如果你想滚动试试这个

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

SYA:)