錨跳動畫問題

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>