jQuery滚动到Div

15 浏览
0 Comments

jQuery滚动到Div

我正在制作一个常见问题页面，并在页面顶部放置了按钮，用于跳转到不同的类别（跳转到我用作类别标签的p标签，例如：

用于我的通用类别）。\n而不仅仅是直接跳转到类别，我想添加一个滚动效果。我希望类似于http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm 这样的效果，它可以滚动到我页面中所需的部分。该链接是一个脚本，可以以平滑的滚动效果返回到页面顶部。我需要类似的东西，它可以滚动到我所链接的位置。例如，如果我想跳转到一个杂项类别，我只需使用Miscellaneous，它就会滚动到页面的该部分。

0

3 答案

0 Comments

问题的出现原因：使用jQuery实现点击链接后页面滚动到相应位置的功能。

解决方法：

1. 首先在页面加载完毕后，使用jQuery的$(function())函数来执行代码。

2. 选取所有以"#"开头的链接，并为其绑定点击事件。

3. 在点击事件中，通过$(this)获取当前点击的链接元素，然后使用attr('href')方法获取链接的href属性值。

4. 使用substr(1)方法去掉href属性值的第一个字符"#"，得到对应的书签名。

5. 使用$('a[name='+name+']')选择器选取具有相同书签名的元素，使用offset()方法获取其相对于文档的偏移位置。

6. 使用animate()方法来实现页面滚动效果，通过设置scrollTop属性值为目标位置的top值，使页面滚动到相应位置。

7. 使用e.preventDefault()方法阻止默认的点击事件，避免页面跳转。

类似下面的代码可以让你接管每个内部链接的点击事件，并滚动到相应的书签位置：

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

这是一个非常好的回答！谢谢。

请原谅我的愚蠢，但有人能把这个答案翻译成英文吗？

：你不明白的是什么？

大致思路。`$('a[href^=#]')`是什么意思？`$('a[name='+name+']')`又是什么意思？还有，你是怎么想到用这种方式来实现的呢？我也想学习。

问题的出现原因是使用jQuery实现点击链接后页面滚动到相应位置的功能。为了解决这个问题，我们可以在页面加载完毕后，使用jQuery的$(function())函数来执行代码。首先选取所有以"#"开头的链接，并为其绑定点击事件。在点击事件中，通过$(this)获取当前点击的链接元素，然后使用attr('href')方法获取链接的href属性值。接着使用substr(1)方法去掉href属性值的第一个字符"#"，得到对应的书签名。然后使用$('a[name='+name+']')选择器选取具有相同书签名的元素，使用offset()方法获取其相对于文档的偏移位置。最后使用animate()方法来实现页面滚动效果，通过设置scrollTop属性值为目标位置的top值，使页面滚动到相应位置。为了阻止默认的点击事件，避免页面跳转，我们使用e.preventDefault()方法。

0
0 Comments

问题的出现原因是：用户点击页面中的某个链接时，页面没有平滑地滚动到对应的目标位置。

解决方法是使用jQuery的animate()方法来实现页面的平滑滚动。具体的代码如下：

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

这段代码通过监听页面中所有带有href属性且值包含#的链接的点击事件。然后判断点击的链接是否是当前页面的锚点链接，并且目标位置存在。如果满足条件，则使用animate()方法将页面平滑地滚动到目标位置。

如果想要查看这段代码的演示效果，可以点击以下链接：http://css-tricks.com/snippets/jquery/smooth-scrolling/。

除此之外，还有一位用户分享了另外一个解决方案，可以访问该链接查看：stackoverflow.com/questions/28400107/…。

0
0 Comments

问题：(jQuery Scroll to Div)的出现原因和解决方法

在网页开发中，经常需要同时移动body和html对象。

以下是一个示例代码，可以使用jQuery实现滚动到指定的div：

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

ShiftyThomas指出：

$("#divToBeScrolledTo").offset().top + 10 // +10（像素）减小了边距。

因此，要增加边距，可以使用以下代码：

$("#divToBeScrolledTo").offset().top - 10 // -10（像素）将增加窗口顶部与元素之间的边距。

代码中没有分号：

.offset().top;

如果要在顶部添加10像素的边距，应该是减去10吗？

.offset().top - 10

如果要控制滚动的速度，可以在animate函数中添加一个持续时间(duration)参数（以毫秒为单位，可以是整数或字符串）：

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

以上是关于问题（jQuery Scroll to Div）的出现原因和解决方法的整理。

0