scrollTo/localscroll.js 根本不工作

Question

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
      <script src="js/jquery.localscroll.js"></script>
      <script src="js/jquery.scrollTo.js"></script>
      <script src="js/script.js"></script>

腳本.js：

$(document).ready(function() {

    $('#menu').localScroll({
        target:'#content'
    });   

});

html：

  <div id="container">
     <div id="menu">
     <nav>
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#gigs">GIGS</a></li>
            <li><a href="#top10">TOP10</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
     </nav>
     </div>

     <div id="content"><!-- content -->
        <div id="home">home</div>
        <div id="gigs">gigs</div>
        <div id="top10">top10</div>
        <div id="contact">contact</div>
     </div><!-- end of content -->

我不明白出了什么問題....幫幫我！ 謝謝

Answer 1

問題部分在於您的 HTML 格式，並且您這邊也可能存在一些 CSS 錯誤（從這里無法判斷。）

首先，使用像<nav>這樣的 html 元素是個壞主意，（我不知道它是什么，這是我第一次看到它，它可能會導致 jQuery 出現問題）

其次，您的content div 必須具有固定大小，並且overflow:scroll作為 CSS 標記。

要查看工作示例，請查看我為您制作的這個 JsFiddle

Answer 2

我記得在某個時候使用過這個插件，我認為你需要指定一個目標

$(document).ready(function() {

    $('#menu').localScroll({
        target:'#content'
    });   

});

Answer 3

這對我有用：我兩次包含該文件。

在我們的標題中：

<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>

在我們的頁腳中：

<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>

刪除第二個包括解決了問題。

發生這種情況是因為將新的網站設計合並到我們現有的網站上。

Answer 4

我剛剛在 chrome 上寫了一篇關於 localscroll 的博客文章： http ://lukaszkups.pl/blog/localscroll-chrome-problem/

你應該使用：

$("html,body").localScroll({duration:800});

持續時間當然是可選的，但至少將 html/body 設置為目標 ;)

Answer 5

保持您的菜單包裝器原樣並將 js conde 更改為：

$(document).ready(function()
    {
        $('#menu').localScroll({duration:800});
    }
);

而且我認為您不需要內容包裝器中的內容 ID。 那可能會有所幫助。

Answer 6

我遇到了完全相同的問題。

Chrome讓我發瘋，為什么它不工作，但有趣的是我以前使用過這個插件並且它在所有瀏覽器中都有效！！！

所以我查看了 HTML、CSS、JS 的每一點，試圖找出不同之處。

見下面我的錨。

<a class="anchor" name="myanchor"></a>

我在“ anchor ”類上的 CSS 是空白的。 一旦我將 CSS ' position: relative ' 添加到錨元素，賓果！ 它在 Chrome 中工作。

希望這可以幫助某人！