锚跳动画问题

Question

关于我的网站的另一个问题是：我正在尝试使用JQuery动画“锚跳”并且我正在使用以下代码。 在我看来，这应该工作，但它并不完全。

忘记提及：只要按下标题中的任何按钮，就应该执行锚点跳转。

$(function () {
    $("a").click(function () {
        if (this.hash) {
            var hash = this.hash.substr(1);

            var $scrollToElement = $("a[name=" + hash + "]");
            var scrollToPosition = $scrollToElement.position().top;

            $("html, body").animate({
                scrollTop: scrollToPosition
            }, 1000, "swing");

            return false;
        }
    });
});

<div name="home" id="body_container">
    <div id="banner_container">
        <img id="banner" />
    </div>
    <div id="content_container">
        <div name="over" id="over_content"></div>
        <div name="contact" id="contact_content"></div>
    </div>
</div>

您可以在JSFiddle中看到所有代码

Answer 1

除了Harry的解决方案，你应该改变

var scrollToPosition = $scrollToElement.position().top;

至

var scrollToPosition = $scrollToElement.offset().top;

position（）为您提供容器的相对偏移量（在您的情况下为0），offset将为您提供整个文档的偏移量，这有助于您正确滚动。

试试这个http://jsfiddle.net/eax7ppwb/2/

Answer 2

您的代码中存在一些问题，所有这些问题导致代码无法正常工作。 它们如下：

• this.hash指的是作为URL一部分的目标。为了返回一个值，应该设置你的锚标记的href 。 （例如，像<a href ='#over' ）
• 无论何时单击任何链接，页面都必须动画到存在相应内容的页面部分。 为此，您应该使用所需的名称而不是a标记来定位div 。 如果你得到a标签的top并尝试设置它的动画，就没有移动，因为这与你点击过的标签相同。

下面的片段解决了这两个问题，并且可以按照您的期望工作:( 注意：由于lozy219的答案，该片段的位置问题也已修复。）

 $(function() { $("a").click(function() { if (this.hash) { var hash = this.hash.substr(1); var $scrollToElement = $("div[name=" + hash + "]"); var headerHeight = $('header').height(); var scrollToPosition = $scrollToElement.offset().top - headerHeight; $("html, body").animate({ scrollTop: scrollToPosition }, 1000, "swing"); /* To add/remove class */ $('.menuItem').removeClass('selected'); // first remove class from all menu items $(this).children('.menuItem').addClass('selected'); // then add to the clicked item return false; } }); }); 

 * { padding: 0; margin: 0 auto; text-decoration: none; } body { background: rgb(223, 227, 238); text-align: center; } header { min-width: 100%; background: rgb(50, 50, 50); height: 80px; position: fixed; z-index: 10; } #header_container { max-width: 1024px; height: 100%; } #header_container div { float: left; display: inline-block; width: 25%; } #logo { width: 50%; height: auto; } .menuItem { padding-top: 29px; height: calc(100% - 29px); border: 0; text-align: center; font-family: Signika; font-size: 25px; color: rgb(203, 207, 218); } .menuItem:hover { border-bottom: 4px solid rgb(59, 89, 202); height: calc(100% - 33px); color: rgb(160, 170, 218); } .selected { border-bottom: 4px solid rgb(59, 89, 202); height: calc(100% - 33px); color: rgb(160, 170, 218); } .menuLogo { padding-top: 14.5px; height: calc(100% - 14.5px); border: 0; text-align: center; } #mobile_menu_button { display: none; } #body_container { padding-top: 80px; } #banner_container { position: fixed; left: 0; right: 0; } #banner { width: 1024px; height: auto; } #content_container { background: rgb(235, 235, 240); max-width: 1024px; height: 100%; position: relative; top: 300px; box-shadow: 0px 5px 10px rgb(235, 235, 240); -webkit-box-shadow: 0px 5px 10px rgb(235, 235, 240); } #over_content { width: 100%; height: 1000px; } #contact_content { background-color: rgb(200, 200, 200); height: 1000px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div id="header_container"> <div class="menuLogo"> <img id="logo" /> </div> <a href="#home"> <div id="homeButton" class="menuItem selected">Home</div> </a> <a href="#over"> <div id="overButton" class="menuItem">Over</div> </a> <a href="#contact"> <div id="contactButton" class="menuItem">Contact</div> </a> <div id="mobile_menu_button"></div> </div> </header> <div name="home" id="body_container"> <div id="banner_container"> <img id="banner" /> </div> <div id="content_container"> <div name="over" id="over_content">Over menu's content</div> <div name="contact" id="contact_content">Contact menu's content</div> </div> </div>