javascript - 是否可以通过滚动到元素来滚动元素上方/下方

Question

我有一个简单的菜单，当单击菜单项时，该菜单会滚动到某个部分。

例如:

<li><a href="#contact" class="menu_item">Contact</a></li>

将滚动到:

<section id="contact"></section>

但是我也有一个始终粘在顶部的菜单，并且该菜单的高度不是用滚动脚本计算的。因此菜单总是悬停在元素的顶部，使其部分内容不可读。

如何更改它，使其不直接滚动到该元素，但假设在其上方 80px 处？最好只针对一个元素，因为我的页面上只有一个部分遇到此问题。

我正在使用这个滚动到元素脚本:

/* Scroll to Main Menu
        ================================================== */
        $('#navigation a[href*=#]').click( function(event) {
            var $this = $(this);
            var offset = -80;
            if($this.parent().is(':nth-child(2)')) {
                offset = 2; // for second child dont do offset
            };
            $.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
            event.preventDefault();
        });

        /* Scroll to Element on Page
        ================================================== */
        $('a#to-blog').click( function(event) {
            event.preventDefault();
            $.scrollTo( $('#blog') , 1250, {  offset: 1 , 'axis':'y' } );
        });

         $('.hero-btn').click( function(event) {
            var $this = $(this);
            var offset = -80;
            if($this.attr('href') == '#about-us' || $('.nomenu').is(':visible')) {
                offset = 0; // for first section dont do offset
            };
            $.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
            event.preventDefault();
        });

        /* Add active class for each nav depending on scroll
        ================================================== */
        $('section').each(function() {
            $(this).waypoint( function( direction ) {
                if( direction === 'down' ) {
                    var containerID = $(this).attr('id');
                    /* update navigation */
                    $('#navigation a').removeClass('active');
                    $('#navigation a[href*=#'+containerID+']').addClass('active');
                }
            } , { offset: '80px' } );

            $(this).waypoint( function( direction ) {
                if( direction === 'up' ) {
                    var containerID = $(this).attr('id');
                    /* update navigation */
                    $('#navigation a').removeClass('active');
                    $('#navigation a[href*=#'+containerID+']').addClass('active');
                }          
            } , { offset: function() { return -$(this).height() - 80; } });
        });

Answer 1

我相信您需要将各个地方的偏移量更改为您想要的值:

var offset = -80;

较小的数字将位于页面的“上方”，较大的数字将位于页面的“下方”。