HTML平滑滚动[没有锚动画]?

时间:2013-11-06 07:27:44

标签: javascript jquery html css ajax

是否可以为网页创建更流畅的滚动? 例如,MS Word 2013具有滚动效果, 我正在寻找。 还没有找到任何其他的例子。 我听说你可以用AJAX做很多这样的事情,那么它有可能吗? 我不希望使用平滑滚动来锚定,但是当您使用鼠标滚轮或滚动条自由向下滚动页面时。但是我正在寻找类似于这种'平滑滚动来锚定'的效果。

3 个答案:

答案 0 :(得分:1)

NiceScroll是我一直在寻找的。 如我所愿,它使滚动更加平滑。 https://code.google.com/p/jquery-nicescroll/downloads/detail?name=jquery.nicescroll.350beta5.7z&can=2&q=

答案 1 :(得分:0)

没有。滚动速度由浏览器决定(通常直接由计算机/设备上的设置决定)。 CSS和Javascript没有(或不应该)有任何影响系统设置的方法。

您可以尝试伪造它,但滚动条的外观会受到损害。

当且仅当您捕获滚动事件时,您才能动态调整内容,以便显示所需的部分。

Flash可能会让你获得实现目标的自由。

[编辑]
请注意:这是没有主播标记
我试图在没有任何锚标记的情况下模拟你的查询。虽然它不是你的问题的完美答案,但它仍然值得一试: -

HTML: -

<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>

CSS: -

div {
height: 50px;
}

最后将此添加到你的jquery: -

 $(document).ready(function () {
   $("html, body").animate({
    scrollTop: $("#div5").offset().top
   }, 5000);
  });

答案 2 :(得分:0)

您可以使用JQuery轻松完成

加载JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
</script>

以上代码适用于平滑滚动