Question

我正在使用与此处使用相同的“向下滚动”方法：

当然，该示例中的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：）

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

1 个答案: