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

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

javascript jquery css html

Javascript JQuery使用粘性导航栏平滑滚动到锚点,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有一个带有粘性标题的网页，我正试图实现平滑滚动以定位导航标签。当我单击指向我要转到的部分的导航链接时，scrollTop:href.offset（）。top-100似乎无法正常工作。如果我在网页导航到该部分后再次单击链接，我可以看到页面滚动，但随后它会返回顶部。知道发生了什么吗？我使用的是微软Edge（是的，我知道…） HTML jQuery 编辑：我理解，将元素设置为显示：已修复会将其从页面流中删除，我认为这是导致问题的原因。有解决方法吗？编辑： Edge和Firefox没有配合初始方法

我有一个带有粘性标题的网页，我正试图实现平滑滚动以定位导航标签。当我单击指向我要转到的部分的导航链接时，

scrollTop:href.offset（）。top-100

似乎无法正常工作。如果我在网页导航到该部分后再次单击链接，我可以看到页面滚动，但随后它会返回顶部。知道发生了什么吗？我使用的是微软Edge（是的，我知道…）

HTML

jQuery

编辑：

我理解，将

元素设置为

显示：已修复会将其从页面流中删除，我认为这是导致问题的原因。有解决方法吗？
编辑：
Edge和Firefox没有配合初始方法修改hashchange
行为，因此此编辑只是删除window.location.hash
步骤，以防止动画后跳转。但是，这并不理想，因为它会阻止默认的哈希位置行为

$（文档）.ready（函数（）{
$（'a[href*=“#”]”）。在（'click'，函数（事件）{
让hash=this.hash；
if（散列）{
event.preventDefault（）；
$（'html，body'）.animate（{scrollTop:$（hash.offset（）.top-100}，750）；
}
});
});
nav{
位置：固定；
填充：4px；
边框：2倍实心#000；
宽度：100%；
线高：2.25em；
背景颜色：黄色；
}
氢{
填充：4px；
边框：1px实心#000；
宽度：100%；
线高：100px；
背景色：红色；
}









































第一节








































正如之前所建议的，Microsoft Edge似乎没有正确支持.hash功能，而不会造成一些不良影响，例如平滑滚动功能反弹。为了解决这个问题，我决定对支持它的浏览器使用pushState
，这达到了预期的效果
HTML
JAVASCRIPT
我不知道如何动态提取调用文件名，例如index.html或main.html，以动态生成哈希URL，这样每页都必须更新。否则，这正是我所期望的。请参阅实现以了解工作示例。
这似乎不起作用。JSFIDLE和运行代码片段
没有产生期望的结果。在导航上的后续单击导致了与以前相同的行为。@AaronTomason，我确实明白您在Edge中的意思（在Firefox中也会发生）。目前，这种方法仅在Chrome中有效（将进一步研究）。@AaronTomason编辑了一个解决方案的答案，我认为该解决方案可以实现您在浏览器之间的视觉效果，但不幸的是，它实际上没有设置window.location.hash
（这不太理想）。感谢您的更新。我希望保留散列，这样我就可以保留浏览器的后退和前进按钮功能。我想知道是否有一种不同的方法可以保留该功能。我想我找到了它，检查jsfiddle.net/ky4La0s1/65/这将允许我保留位置功能，我只需要再调整一下。
<!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>

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

$(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');
            });     
        }
    });
});

<!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>

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

$('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');
            }
        });     
    }
});