306

我一直在尝试滚动到 div id jquery 代码以正常工作。基于另一个堆栈溢出问题，我尝试了以下

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

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

但它没有用。它只是捕捉到 div。我也试过

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

毫无进展。

4

15 回答 15

789

你需要动画html, body

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

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
于 2013-09-25T18:36:45.503 回答
126

如果您想覆盖页面上的标准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});
});
于 2014-09-30T20:54:54.043 回答
29

这是我的 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>
于 2014-03-17T13:16:23.500 回答
14

纯JS：

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

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

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

于 2020-05-20T16:34:01.553 回答
12

再举一个例子：

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>
于 2016-12-28T20:36:46.423 回答
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

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

于 2015-02-20T14:52:20.107 回答
6

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

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });
于 2019-02-19T20:01:13.740 回答
5

are you sure you are loading the jQuery scrollTo Plugin file?

you might be getting a object: method not found "scrollTo" error in the console.

the scrollTO method is not a native jquery method. to use it you need to include the jquery scroll To plugin file.

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

soln: add this in the head section.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>
于 2013-09-25T19:37:18.277 回答
5

我对 Vanilla JS 和 jQuery 的解决方案

香草JS：

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

jQuery：

您需要为 html、body 设置动画

$("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
于 2021-12-30T21:03:00.703 回答
4

该脚本是对 Vector 脚本的改进。我对它做了一点改动。因此，此脚本适用于其中包含 page-scroll 类的每个链接。

起初没有缓和：

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

为了缓和你将需要 Jquery UI：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

将此添加到脚本中：

'easeOutExpo'

最后

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

您可以在这里找到所有的缓和：备忘单。

于 2015-12-08T13:18:39.713 回答
3

这是最简单的。来源- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
于 2018-10-11T12:39:22.270 回答
3

这是我使用 jQuery 平滑滚动到 div / 锚点的解决方案，以防你有一个固定的标题，这样它就不会在它下面滚动。如果您从其他页面链接它，它也可以工作。

只需将“.site-header”替换为包含您的标题的 div。

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
于 2020-02-06T07:53:43.193 回答
2

您可以使用以下简单的 jQuery 代码来实现。

可以从这里找到教程、演示和源代码 -使用 jQuery 平滑滚动到 div

JavaScript：

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML：

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>
于 2016-01-29T06:41:37.750 回答
2

在这里，我尝试了这个，这对我很有用。

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML：

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>
于 2018-05-18T12:08:12.623 回答
0

这对我有用。

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

谢谢。

于 2018-11-23T19:00:12.793 回答