JQuery Smooth Scroll to Anchor with Sticky Navigation Bar

Question

I have a webpage with a sticky header that I'm attempting to implement smooth scrolling to anchor tags for navigation. 我有一个带有粘性标题的网页，我正在尝试实现平滑滚动以锚定导航标签。 When I click on the navigation link to the section I want to go scrollTop: href.offset().top - 100 does not appear to work correctly. 当我点击导航链接到我要去的部分scrollTop: href.offset().top - 100似乎无法正常工作。 If I click the link again after the webpage has navigated to that section, I can see the page scroll, but then it bounces back to the top. 如果我在网页导航到该部分后再次点击该链接，我可以看到页面滚动，但随后它会反弹回顶部。 Any idea what is going on? 知道发生了什么事吗？ I'm using Microsoft Edge (Yeah, I know ...). 我正在使用Microsoft Edge（是的，我知道......）。

HTML 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 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 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 的jsfiddle

EDIT: 编辑：

I understand that setting a <div> element to display:fixed removes it from the flow of the page, which is what I believe is causing the issues. 我知道将<div>元素设置为display:fixed会将其从页面流中移除，这是我认为导致问题的原因。 Is there a work around for this? 有没有解决这个问题？

Answer 1

EDIT: 编辑：

Edge and Firefox were not cooperating with initial approach to modify hashchange behavior, so this edit simply removes the window.location.hash step to prevent the jump after the animation. Edge和Firefox没有合作修改hashchange行为的初始方法，所以这个编辑只是删除了window.location.hash步骤，以防止动画后的跳转。 However, this is not ideal because it prevents the default hash location behavior. 但是，这并不理想，因为它可以防止默认的哈希定位行为。

 $(document).ready(function() { $('a[href*="#"]').on('click', function(event) { let hash = this.hash; if (hash) { event.preventDefault(); $('html, body').animate({scrollTop: $(hash).offset().top - 100}, 750); } }); });

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

 <!DOCTYPE HTML> <html lang="en"> <head></head> <body id="home"> <!-- Navigation --> <nav><a href="#section1">Section #1</a></nav> <!-- Main Content --> <main> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <h2 id="section1">section1</h2> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

ORIGINAL: 原版的：

I think location.hash causes the scroll to jump to the top after the scrollTop animation has completed. 我认为location.hash会在scrollTop动画完成后导致滚动跳转到顶部。 You can modify the hashchange event to stop the scroll at the same distance above your anchors to eliminate the jump. 您可以修改hashchange事件以停止在锚点上方相同距离处滚动以消除跳转。

$(document).ready(function() {

  $(window).on('hashchange', function() {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  });

  $('a[href*="#"]').on('click', function(event) {
    let hash = this.hash;
    if (hash) {
      event.preventDefault();
      $('html, body').animate({
        scrollTop: $(hash).offset().top - 100
      }, 750, function() {
        window.location.hash = hash;
      });
    }
  });
});

Answer 2

As it was suggested before, Microsoft Edge does not appear to properly support the .hash feature without causing some ill effects such as the rebounding of the smooth scroll feature. 正如之前所建议的那样，Microsoft Edge似乎没有正确支持.hash功能而不会导致一些不良影响，例如平滑滚动功能的反弹。 In order to work around this, I decided to use pushState for browsers that supported it, which achieved the desired effect. 为了解决这个问题，我决定将pushState用于支持它的浏览器，从而达到了预期的效果。

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

I was not able to figure out how to dynamically pull the calling file name, for example index.html or main.html to dynamically generate the hashed URL so that will have to be updated per page. 我无法弄清楚如何动态提取调用文件名，例如index.html或main.html来动态生成散列URL，因此必须每页更新一次。 Otherwise, this works exactly how I had expected. 否则，这完全符合我的预期。 Please see the JSFiddle implementation for a working example. 请参阅JSFiddle实现以获取工作示例。

JQuery Smooth Scroll to Anchor with Sticky Navigation Bar

问题描述

2 个解决方案

解决方案1
2 2018-09-13 22:27:43

解决方案2
0 已采纳 2018-10-04 12:21:25

JQuery Smooth Scroll to Anchor with Sticky Navigation Bar

问题描述

2 个解决方案

解决方案1 2 2018-09-13 22:27:43

解决方案2 0 已采纳 2018-10-04 12:21:25

解决方案1
2 2018-09-13 22:27:43

解决方案2
0 已采纳 2018-10-04 12:21:25