我正在制作一个FAQ页面,并在顶部有按钮跳转到一个类别(它跳转到我用作类别标签的p
标签,例如我的一般类别为<p id="general">
)。 而不是只是跳到类别,我想添加滚动效果。我想要http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm之类的东西滚动到我的页面的所需部分。该链接是一个脚本,可以很好地滚动到页面的顶部。我需要类似的东西来滚动到我链接的地方。例如,如果我想去混杂。类别,我想只能拥有<a href="#misc">Miscellaneous</a>
并让它滚动到该页面的该部分。jQuery滚动到Div
回答
$(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/的演示,我以前用过它,它工作得很好。
如果链接元素是:
<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>
据我记得正确..(虽然,我没有测试它,并从内存中写道)
– moffepoffe 2012-11-17 21:25:04
像这样的事情会让你花费在每个内部链接的点击和滚动到相应的书签的位置:
$(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();
});
});
人们可以给出的最佳答案!谢谢 – Zippie 2013-10-04 22:08:19
请原谅我的愚蠢,但是有人能把这个答案翻译成英文吗? – CodyBugstein 2014-02-06 23:06:21
@Imray:你不明白的是什么? – Guffa 2014-02-06 23:44:30
可以只使用JQuery的位置功能,让您的DIV的坐标,然后使用JavaScript的滚动:
var position = $("div").position();
scroll(0,position.top);
$(“div”)。offset()效果更好。 – 2012-08-08 04:27:14
这是往往移动两个人体所需和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;' – luqmaan 2012-09-20 15:50:20
就像魅力....! – user1811801 2013-10-28 12:30:30
顶部的10像素边距不应该减10吗? .offset()。top - 10 – ShiftyThomas 2014-05-28 20:32:26
我遇到同样的。锯使用这样一个例子:我用它如下 https://github.com/flesler/jquery.scrollTo
:
$('#arrow_back').click(function() {
$.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' });
});
干净的解决方案。适合我!
下面的脚本是一个通用的解决方案,适合我。它基于从这个和其他线程中提取的想法。
当单击以“#”开头的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">
。随意更改这些数字。
我希望它有帮助!
您还可以使用,而不是“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);
});
- 1. 滚动div div jquery
- 2. jQuery - 平滑滚动到div
- 3. jQuery:水平滚动到div
- 4. jquery滚动到div标记
- 5. jQuery #div滚动
- 6. JQuery动画滚动到div顶部
- 7. jQuery从div滚动
- 8. JQuery Smooth Div滚动
- 9. jquery让div滚动?
- 10. 用jquery滚动div
- 11. 用Jquery滚动div
- 12. 滚动到div
- 13. 滚动到div
- 14. Div滚动与jQuery动画
- 15. Smooth Div滚动jquery不滚动
- 16. jQuery - 滚动div与溢出-y:滚动;
- 17. Mozilla滚动jquery div不滚动
- 18. Jquery - 滚动DIV(溢出:自动;)与DIV
- 19. jQuery - 如果div动态移动如何滚动页面到div?
- 20. 滚动到下一个DIV使用jQuery
- 21. 使用jquery滚动到div ID
- 22. 使用jquery滚动到父div top
- 23. jQuery的滚动到div的再暴露
- 24. jquery没有滚动到div ID
- 25. JQuery的scrollTo滚动到下一个DIV
- 26. JQuery跳转到小滚动Div
- 27. jquery hide滚动到页面顶部div
- 28. jQuery水平滚动到DIV点击
- 29. jquery滚动到底部DIV问题
- 30. jquery使div总是滚动到底部
呀,如果不是在15个字符的最小评论我会一直在与你的评论说:快! :P – FarligOpptreden 2011-03-12 19:23:23
这个剧本是胜利者,但我不知道谁可以选择! – Christopher 2011-03-12 19:28:08
那么,看到我第一次(15秒),我想我应该获得胜利? :P作为谢意的表示,我将upvote symmet的答案一些额外的代表... – FarligOpptreden 2011-03-12 19:35:14