jQuery滚动到Div

我正在制作一个“常见问题解答”页面，顶部有一些按钮可以跳转到某个类别（它跳转到p我用作类别标签的标签，例如，<p id="general">用于我的常规类别）。我想添加一个滚动效果，而不仅仅是跳到该类别。我想要类似http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm的内容，该内容可以滚动到页面的所需部分。该链接是一个脚本，该脚本转到页面顶部，具有良好的滚动效果。我需要类似的东西，可以滚动到我链接的位置。例如，如果我想去其他地方。类别，我希望它能够<a href="#misc">Miscellaneous</a>滚动到页面的该部分。

$(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/以获取演示，我以前使用过它，并且效果很好。

这是经常需要移动身体和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.

这样的事情将使您接管每个内部链接的单击并滚动到相应书签的位置：

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

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

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

如果链接元素是：

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

而“杂类”类别受以下内容限制：

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

您可以使用jQuery达到预期的效果：

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

据我没记错的话..（尽管我还没有测试它并从内存中写入它）

以下脚本是适用于我的通用解决方案。它基于从此主题和其他主题中得出的想法。

单击具有以“＃”开头的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的速度滚动到页面顶部。单击带有标签的链接以600的速度<a href="#mydiv">滚动到100px以上<div id="mydiv">。请随意更改这些数字。

希望对您有所帮助！

我遇到了同样的情况。看到了一个使用此示例：https : //github.com/flesler/jquery.scrollTo

我使用它如下：

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

清洁溶液。为我工作！

您还可以使用“名称”代替“ href”来获得更简洁的网址：

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