加载新页面后平滑滚动锚

Question

我想导航到新页面上的锚点，但我希望页面在顶部加载，然后立即平滑滚动到相关锚点。这能做到吗?

我完全是一个Javascript新手。

这是我目前在当前页面中使用的平滑滚动的js。我只是在链接上应用了一个'scroll'类。

非常感谢!

<script>
$(function(){
  $('.scroll').on('click',function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' }, 1000, 'swing');
  });
});
</script>

Answer 1

当浏览器自动检测到hash并带您到该位置时…
我想到，你可以首先重置滚动位置为0，然后使平滑滚动。

之类的…

// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); }, 1);
$(function() {
    // your current click function
    $('.scroll').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top + 'px'
        }, 1000, 'swing');
    });
    // *only* if we have anchor on the url
    if(window.location.hash) {
        // smooth scroll to the anchor id
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top + 'px'
        }, 1000, 'swing');
    }
});

Edit :将scroll(0,0)移到$(function(){...});之外以防止闪烁。
此外，还添加了带有工作示例的代码片段。
^{全屏观看效果最佳}

        html, body {
            margin: 0;
            padding: 0;
        }
        .hidden-code {
            display: none;
            visibility: hidden;
            opacity: 0;
        }
        .header {
            background-color: #ccc;
            padding: 5px;
        }
        .header li {
            padding: 5px;
            margin: 5px;
            display: inline-block;
        }
        .articles > div {
            border: 1px solid;
            margin: 10px;
            padding: 250px 50px;
            background-color: #ccc;
        }
        div:before {
            content: attr(id);
        }
        .footer {
            text-align: center;
        }

    <div class="header">
        <ul>
            <li>page header title/navbar</li>
            <li><a class="scroll" href="#text-1">#text-1</a></li>
            <li><a class="scroll" href="#text-2">#text-2</a></li>
            <li><a class="scroll" href="#text-3">#text-3</a></li>
            <li><a class="scroll" href="#text-4">#text-4</a></li>
            <li><a class="scroll" href="#text-5">#text-5</a></li>
            <li><a class="scroll" href="#text-6">#text-6</a></li>
            <li><a class="scroll" href="#text-7">#text-7</a></li>
            <li><a class="scroll" href="#text-8">#text-8</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="content">
            <div class="articles">
                <div id="text-1"></div>
                <div id="text-2"></div>
                <div id="text-3"></div>
                <div id="text-4"></div>
                <div id="text-5"></div>
                <div id="text-6"></div>
                <div id="text-7"></div>
                <div id="text-8"></div>
            </div>
        </div>
        <div class="footer">company &copy; 2015</div>
    </div>
    <div class="hidden-code">
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            // to top right away
            if ( window.location.hash ) scroll(0,0);
            // void some browsers issue
            setTimeout( function() { scroll(0,0); }, 1);
            // any position
            $(function() {
                // your current click function
                $('.scroll').on('click', function(e) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $($(this).attr('href')).offset().top + 'px'
                    }, 1000, 'swing');
                });
                // *only* if we have anchor on the url
                if(window.location.hash) {
                    // smooth scroll to the anchor id
                    $('html, body').animate({
                        scrollTop: $(window.location.hash).offset().top + 'px'
                    }, 1000, 'swing');
                }
            });
        </script>
    </div>

Answer 2

这里有一个更现代的方法，似乎工作得很好。这必须放在任何文件的外面。准备好了。onLoad处理器。

// Handle page load
if ( window.location.hash ) {
    var target = window.location.hash.slice( 1 );
    if ( document.getElementById( target ) ) {
        $( function() {
            if ( window.location.hash ) {
                if ( $( '#' + target ).length ) {
                    window.scrollTo( 0, 0 );
                    $( 'html, body' ).animate( {
                        scrollTop: $( '#' + target ).offset().top - 50
                    }, 800 );
                }
            }
        } );
        if ( 'scrollRestoration' in history ) {
            history.scrollRestoration = 'manual';
        }
        window.scrollTo( 0, 0 );
    }
}
// Handle anchor links
$( function() {
    $( 'a[href^="#"]' ).on( 'click', function( e ) {
        e.preventDefault();
        $( 'html, body' ).animate( {
            scrollTop: $( $.attr( this, 'href' ) ).offset().top - 80
        }, 800 );
        return false;
    } );
} );