2011-03-12 117 views
60

我正在制作一个FAQ页面,并在顶部有按钮跳转到一个类别(它跳转到我用作类别标签的p标签,例如我的一般类别为<p id="general">)。 而不是只是跳到类别,我想添加滚动效果。我想要http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm之类的东西滚动到我的页面的所需部分。该链接是一个脚本,可以很好地滚动到页面的顶部。我需要类似的东西来滚动到我链接的地方。例如,如果我想去混杂。类别,我想只能拥有<a href="#misc">Miscellaneous</a>并让它滚动到该页面的该部分。jQuery滚动到Div

回答

83
$(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/的演示,我以前用过它,它工作得很好。

+0

呀,如果不是在15个字符的最小评论我会一直在与你的评论说:快! :P – FarligOpptreden 2011-03-12 19:23:23

+0

这个剧本是胜利者,但我不知道谁可以选择! – Christopher 2011-03-12 19:28:08

+1

那么,看到我第一次(15秒),我想我应该获得胜利? :P作为谢意的表示,我将upvote symmet的答案一些额外的代表... – FarligOpptreden 2011-03-12 19:35:14

7

如果链接元素是:

<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> 

据我记得正确..(虽然,我没有测试它,并从内存中写道)

+2

moffepoffe 2012-11-17 21:25:04

28

像这样的事情会让你花费在每个内部链接的点击和滚动到相应的书签的位置:

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

人们可以给出的最佳答案!谢谢 – Zippie 2013-10-04 22:08:19

+0

请原谅我的愚蠢,但是有人能把这个答案翻译成英文吗? – CodyBugstein 2014-02-06 23:06:21

+0

@Imray:你不明白的是什么? – Guffa 2014-02-06 23:44:30

26

可以只使用JQuery的位置功能,让您的DIV的坐标,然后使用JavaScript的滚动:

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

$(“div”)。offset()效果更好。 – 2012-08-08 04:27:14

99

这是往往移动两个人体所需和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. 
+18

这里没有分号'.offset()。top;' – luqmaan 2012-09-20 15:50:20

+0

就像魅力....! – user1811801 2013-10-28 12:30:30

+0

顶部的10像素边距不应该减10吗? .offset()。top - 10 – ShiftyThomas 2014-05-28 20:32:26

1

我遇到同样的。锯使用这样一个例子:我用它如下 https://github.com/flesler/jquery.scrollTo

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

干净的解决方案。适合我!

1

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

当单击以“#”开头的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">滚动到100像素以上<div id="mydiv"> 。随意更改这些数字。

我希望它有帮助!

+0

我应该删除第2行:'event.preventDefault();'。通过这个规则,锚点不会被添加到URL中(在你的地址栏中)。所以,如果有人复制页面....你明白了吗? ;)通过删除该行已修复。谢谢:) – Bob 2015-03-07 21:11:51

+0

是的,那好点。谢谢。该行也阻止了脚本在Firefox中的工作。 – lflier 2015-07-30 23:32:00

0

您还可以使用,而不是“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); 
});