Question

我有一个带有粘性标头的网页，我正在尝试实现平滑滚动以定位要导航的标签。当我单击指向我要去的部分的导航链接时，scrollTop: href.offset().top - 100似乎无法正常工作。如果在网页导航到该部分后再次单击该链接，则可以看到页面滚动，但随后会弹回顶部。知道发生了什么吗？我正在使用Microsoft Edge（是的，我知道...）。

HTML

<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
    <nav><a href="#section1">Section #1</a></nav>
    <main>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
        <h2 id="section1">section1</h2>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
    </main>
</body>
</html>

CSS

nav {
    position:fixed;
    padding:4px;
border:2px solid #000;
width:100%;
    line-height:2.25em;
    background-color:yellow;
}

h2 {
    padding:4px;
    border:1px solid #000;
    width:100%;
    line-height:100px;
    background-color:red;
    }

jQuery

$(document).ready(function() {

    $('a[href*="#"]').click(function(event) {

        var href = $(this.hash);

        if (href.length) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: href.offset().top - 100
            }, 750, function() {
                location.hash = href.attr('id');
            });     
        }
    });
});

JSFiddle

编辑：

我知道将<div>元素设置为display:fixed会将其从页面流中删除，这是导致问题的原因。有没有解决的办法？

Answer 1

如之前所建议的那样，Microsoft Edge似乎没有正确地支持.hash功能，而不会引起诸如平滑滚动功能的反弹之类的不良影响。为了解决此问题，我决定将pushState用于支持它的浏览器，从而达到预期的效果。

HTML

<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
    <nav><a href="#section1">Section #1</a></nav>
    <main>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
        <h2 id="section1">section1</h2>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
    </main>
</body>
</html>

CSS

nav {
    position: fixed;
    padding: 4px;
    border: 2px solid #000;
    width: 100%;
    line-height: 2.25em;
    background-color: yellow;
}

h2 {
    padding: 4px;
    border: 1px solid #000;
    width: 100%;
    line-height: 100px;
    background-color: red;
}

JAVASCRIPT

$('a[href*="#"]').click(function(event) {

    var href = $(this.hash);

    if (href.length) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: href.offset().top - 100
        }, 750, function() {
            if (history.pushState) {
                history.pushState(null, null, 'index.html#' + href.attr('id'));
            } else {
                location.hash = href.attr('id');
            }
        });     
    }
});

我无法弄清楚如何动态提取调用文件的名称，例如index.html或main.html来动态生成哈希URL，因此必须按页面进行更新。否则，这完全符合我的预期。请参见JSFiddle实施示例。

JQuery使用粘性导航栏平滑滚动到锚点

1 个答案: