JavaScript动画平滑滚动

Question

By default when you have fragment links like this: 默认情况下，当您具有如下片段链接时：

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

the browser just, scrolls down to that fragment instantly. 只是浏览器，立即向下滚动到该片段。 How do i program it to smoothly move down to that fragment with standard JS? 我如何编程使其使用标准JS平稳地向下移动到该片段？

Here's an example: 这是一个例子：

Example (To see the working example, just click on the 3 arrows inside the 3 circles and watch the smooth animated scrolling) 示例（要查看工作示例，只需单击3个圆圈内的3个箭头，并观看平滑的动画滚动）

Answer 1

okay, i think i found my answer, posting it here to help others with the similar doubt: 好的，我想我找到了答案，将其发布在这里可以帮助其他有类似疑问的人：

<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

Well you should try something like this 好吧，你应该尝试这样的事情

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

where *#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment* is the id where you want to move or scroll 其中*＃ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment *是您要移动或滚动的ID

another approch is to put this in a function 另一个方法是将其放在函数中

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

I hope this will help you. 我希望这能帮到您。

Regards..:) 问候..：）

[Updated] [更新]

A URI hash is a great way to make JavaScript/AJAX pages with dynamic content bookmarkable. URI哈希是一种使具有动态内容的JavaScript / AJAX页面可标记为书签的好方法。 It can be used in a manner similar to query strings, but changes will not cause a new page request. 可以以类似于查询字符串的方式使用它，但是更改不会引起新的页面请求。 This allows you to store data in the URI which can be read and changed by JavaScript without ever reloading the page. 这使您可以将数据存储在URI中，而JavaScript可以读取和更改数据，而无需重新加载页面。

For the uninitiated, a URI location hash is everything after the # sign in the URI: 对于未启动的用户，URI位置哈希是URI中＃号之后的所有内容：

http://domain.com/page.html#i-am-a-hash A side note: URI hashes are not transferred back to the server, you can only access them client-side. http://domain.com/page.html#i-am-a-hash附带说明：URI哈希不会传输回服务器，您只能在客户端访问它们。

check this blog 检查这个博客

http://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings/ 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