JavaScript動畫平滑滾動

Question

默認情況下，當您具有如下片段鏈接時：

<a href="/some-url#some-fragment">some text</a>

只是瀏覽器，立即向下滾動到該片段。 我如何編程使其使用標准JS平穩地向下移動到該片段？

這是一個例子：

示例（要查看工作示例，只需單擊3個圓圈內的3個箭頭，並觀看平滑的動畫滾動）

Answer 1

好的，我想我找到了答案，將其發布在這里可以幫助其他有類似疑問的人：

<html>
  <head>
    <script type="text/javascript">
      var singleton = {};
      var timeout = singleton;

      window.onscroll = windowScroll;

      function windowScroll ()
      {
        var toTop = document.getElementById('toTop');
        toTop.style.display = ((window.scrollY > 0) ? "block" : "none");
      }

      function scrollStep ()
      {
        var y1 = window.scrollY - 1000;
        window.scrollTo(0, y1);

        if (y1 > 0)
        {
          timeout = window.setTimeout(scrollStep, 100);  
        }
        else if (timeout != singleton)
        {
          window.clearTimeout(timeout);   
        }
      }
    </script>

    <style type="text/css">
      #toTop {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 48px;
      }

      #toTop {
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0.5;
        display: none;
        cursor: pointer;
      }

      #toTop:hover {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <p id="top">your text here</p>
    <a href="#top" onclick="scrollStep(); return false" id="toTop"
       ><img src="images/go-to-top.png" alt="Go to top" title="Go to top"></a>
  </body>
</html>

Answer 2

好吧，你應該嘗試這樣的事情

$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_Conten
tPlaceHolder1_txtcomment").offset().top
},'slow');

其中*＃ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment *是您要移動或滾動的ID

另一個方法是將其放在函數中

function scrollme() {
$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment").offset().top
},'slow');
} <a onclick="javascript:scrollme();">some text</a>

我希望這能幫到您。

問候..：）

[更新]

URI哈希是一種使具有動態內容的JavaScript / AJAX頁面可標記為書簽的好方法。 可以以類似於查詢字符串的方式使用它，但是更改不會引起新的頁面請求。 這使您可以將數據存儲在URI中，而JavaScript可以讀取和更改數據，而無需重新加載頁面。

對於未啟動的用戶，URI位置哈希是URI中＃號之后的所有內容：

http://domain.com/page.html#i-am-a-hash附帶說明：URI哈希不會傳輸回服務器，您只能在客戶端訪問它們。

檢查這個博客

http://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings/

JavaScript動畫平滑滾動

問題描述

2 個解決方案

解決方案1
1 已采納 2013-10-09 09:44:35

解決方案2
0

JavaScript動畫平滑滾動

問題描述

2 個解決方案

解決方案1 1 已采納 2013-10-09 09:44:35

解決方案2 0

解決方案1
1 已采納 2013-10-09 09:44:35

解決方案2
0