jQuery 滚动到 Div答案

【问题标题】：jQuery Scroll to DivjQuery 滚动到 Div
【发布时间】：2011-07-14 04:15:59
【问题描述】：

我正在制作一个常见问题解答页面，顶部有按钮可以跳转到一个类别（它会跳转到我用作类别标签的p 标签，例如<p id="general"> 用于我的一般类别）。我想添加滚动效果，而不是直接跳到类别。我想要像http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm 这样滚动到我页面所需部分的东西。该链接是一个到达页面顶部的脚本，具有很好的滚动效果。我需要类似的东西，可以滚动到我链接到的地方。例如，如果我想去杂项。类别，我希望能够拥有 <a href="#misc">Miscellaneous</a> 并让它滚动到页面的那个部分。

【问题讨论】：

标签： jquery html

【解决方案1】：

$(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;
      }
    }
  });
});

查看此链接：http://css-tricks.com/snippets/jquery/smooth-scrolling/ 进行演示，我以前使用过，效果很好。

【讨论】：

是的，如果不是最少 15 个字符的评论，我会评论你的：快！ :P
这个剧本是赢家，但我不知道该选谁！
好吧，既然我是第一名（领先 15 秒），我想我应该赢得一场比赛？ :P 为了表示感谢，我会赞成 symmet 的回答以获得额外的代表......
伙计们，我的（相关但不公正地否决）问题呢？ stackoverflow.com/questions/28400107/…也许你会有一些见解？
@xaccrocheur 它确实被不公正地否决了。我发布了您的问题的可能解决方案。

【解决方案2】：

如果链接元素是：

<a id="misc" href="#misc">Miscellaneous</a>

Miscellaneous 类别受以下限制：

<p id="miscCategory" name="misc">....</p>

你可以使用jQuery来做你想要的效果：

<script type="text/javascript">
  $("#misc").click(function() {
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
  });
</script>

据我没记错..（虽然，我还没有测试过，是凭记忆写的）

【讨论】：

我尝试了多种（我的意思是多种）方法来以编程方式强制滚动到模态窗口内的 div 顶部。都失败了。这个成功了！干杯！

【解决方案3】：

这样的事情会让你接管每个内部链接的点击并滚动到相应书签的位置：

$(function(){
  $('a[href^=#]').click(function(e){
    var name = $(this).attr('href').substr(1);
    var pos = $('a[name='+name+']').offset();
    $('body').animate({ scrollTop: pos.top });
    e.preventDefault();
  });
});

【讨论】：

最佳答案类型！谢谢
请原谅我的愚蠢，但有人可以将此答案翻译成英文吗？
@Imray：你有什么不明白的？
总体思路。 $('a[href^=#]') 是什么意思？那么$('a[name='+name+']') 呢？另外，你是怎么想到这样做的？我也想学学:)

【解决方案4】：

可以只使用 JQuery 位置函数来获取您的 div 的坐标，然后使用 javascript 滚动：

var position = $("div").position();
scroll(0,position.top);

【讨论】：

【解决方案5】：

经常需要同时移动 body 和 html 对象。

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

ShiftyThomas 是对的：

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.

所以要增加保证金使用：

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element.

【讨论】：

这里没有分号.offset().top;
顶部 10px 的边距不应该是负 10 吗？ .offset().top - 10
如果要控制滚动速度，只需在动画函数中添加一个持续时间（以毫秒为单位）参数（数字为 int 或字符串）：$('html,body').animate( { scrollTop: $("#divToBeScrolledTo").offset().top }, 2000);

【解决方案6】：

我也遇到了。看到一个使用这个的例子： https://github.com/flesler/jquery.scrollTo

我是这样使用的：

$('#arrow_back').click(function () {
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
});

清洁解决方案。为我工作！

【讨论】：

【解决方案7】：

下面的脚本是一个适合我的通用解决方案。它基于从这个和其他线程中提取的想法。

当单击带有以“#”开头的 href 属性的链接时，它会将页面平滑滚动到指定的 div。如果只有“#”，它会平滑滚动到页面顶部。

$('a[href^=#]').click(function(){
    event.preventDefault();
    var target = $(this).attr('href');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});

例如，当上面的代码出现时，单击带有标签<a href="#"> 的链接会以600 的速度滚动到页面顶部。点击带有标签<a href="#mydiv"> 的链接会滚动到<div id="mydiv"> 上方100px 处速度 600。随意更改这些数字。

希望对你有帮助！

【讨论】：

我应该删除第 2 行：event.preventDefault();。根据此规则，锚不会添加到 url（在您的地址栏中）。所以，如果有人复制页面......你明白了吗？ ;) 通过删除该行，它是固定的。谢谢:)
是的，这样更好。谢谢你。该行还阻止脚本在 Firefox 中运行。

【解决方案8】：

您也可以使用 'name' 而不是 'href' 来获得更简洁的 url：

    $('a[name^=#]').click(function(){
    var target = $(this).attr('name');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});

【讨论】：