平滑滚动到div id jQuery

Question

我一直在尝试滚动div id jquery代码才能正常工作.根据另一个堆栈溢出问题,我尝试了以下内容

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

但它没有用.它只是快照到div.我也试过了

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

没有进展.

Answer 1

你需要动画 html, body

演示http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Answer 2

如果要覆盖页面上的标准href-id导航而不更改HTML标记以进行平滑滚动,请使用此(示例):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

Answer 3

这是我的2美分:

使用Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

HTML:

<a class="scroll" target="contact">Contact</a>

和目标:

<h2 id="contact">Contact</h2>

Answer 4

我的 Vanilla JS 和 jQuery 解决方案

普通JS：

document
    .querySelector("#myDiv")
    .scrollIntoView({ behavior: "smooth" });

jQuery：

您需要对 html、body 进行动画处理

$("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

CSS：

html {
  scroll-behavior: smooth;
}

其他属性scroll-behavior

scroll-behavior: auto|smooth|initial|inherit;

Answer 5

再举一个例子：

HTML链接：

<a href="#featured" class="scrollTo">Learn More</a>

JS：

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML 锚点：

  <div id="featured">My content here</div>

Answer 6

普通JS：

如果您使用现代浏览器，则可以在纯 JS 中完成。

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

浏览器支持有点问题，但现代浏览器支持它。

Answer 7

这是我使用的：

<!-- jquery smooth scroll to id's -->   
<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
        }, 500);
        return false;
      }
    }
  });
});
</script>

这样做的好处是您可以使用无限数量的哈希链接和相应的ID，而不必为每个哈希脚本执行新的脚本。

如果您使用的是WordPress，请将代码插入到主题footer.php文件中，紧接在body标记之前</body>。

如果您无权访问主题文件，则可以将代码直接嵌入到帖子/页面编辑器中（必须以“文本”模式编辑帖子），也可以嵌入将在所有页面上加载的“文本”小部件中。

如果您使用的是其他任何CMS或仅使用HTML，则可以将代码插入在body标记之前紧接在所有页面上加载的部分中</body>。

如果您需要更多详细信息，请在此处查看我的快速文章：jQuery平滑滚动到id

希望对您有所帮助，如果您对此有疑问，请告诉我。

Answer 8

此代码对网络上的任何内部链接都很有用

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

Answer 9

您确定要加载 jQuery scrollTo 插件文件吗？

您可能会在控制台中收到一个 object: method not found "scrollTo" 错误。

scrollTO 方法不是原生 jquery 方法。要使用它，您需要包含 jquery scroll To 插件文件。

参考：http : //flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln：在 head 部分添加这个。

<script src="\\path\to\the\jquery.scrollTo.js file"></script>