有没有办法使用jQuery向下滚动到锚链接？
喜欢：
$(document).ready(function(){
$("#gotomyanchor").click(function(){
$.scrollSmoothTo($("#myanchor"));
});
});
答案 0 :(得分：120)
我是这样做的：
var hashTagActive = "";
$(".scroll").on("click touchstart" , function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 2000, 'swing');
hashTagActive = this.hash;
}
});
然后你只需要像这样创建你的锚：
<a class="scroll" href="#destination1">Destination 1</a>
您可以在website上看到它 此处还提供了演示：http://jsfiddle.net/YtJcL/
答案 1 :(得分：47)
我会使用CSS-Tricks.com中的简单代码片段：
$(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;
}
}
});
});
答案 2 :(得分：37)
到目前为止我见过的最佳解决方案： jQuery: Smooth Scrolling Internal Anchor Links
HTML：
<a href="#comments" class="scroll">Scroll to comments</a>
脚本：
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
答案 3 :(得分：12)
jQuery.scrollTo会做你想要的一切以及更多！
你可以传递各种不同的东西：
答案 4 :(得分：4)
这是我用来快速将jQuery scrollTo绑定到所有锚链接的代码：
// Smooth scroll
$('a[href*=#]').click(function () {
var hash = $(this).attr('href');
hash = hash.slice(hash.indexOf('#') + 1);
$.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500);
window.location.hash = '#' + hash;
return false;
});
答案 5 :(得分：3)
我想要一个适用于<a href="#my-id">和<a href="/page#my-id">
<script>
$('a[href*=#]:not([href=#])').on('click', function (event) {
event.preventDefault();
var element = $(this.hash);
$('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
});
</script>
答案 6 :(得分：2)
试试这个。这是我修改的CSS技巧的代码，它非常简单，同时进行水平和垂直滚动。需要JQuery。这是demo
$(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-10, scrollLeft:target.offset().left-10
}, 1000);
return false;
}
}
});
});
答案 7 :(得分：1)
使用hanoo's script我创建了一个jQuery函数：
$.fn.scrollIntoView = function(duration, easing) {
var dest = 0;
if (this.offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = this.offset().top;
}
$('html,body').animate({
scrollTop: dest
}, duration, easing);
return this;
};
用法：
$('#myelement').scrollIntoView();
持续时间和宽松的默认值为400毫秒，并且“摇摆”。
答案 8 :(得分：0)
我在我的网站上使用过：
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
}）;
您可以更改滚动的速度，更改我默认使用的“1200”，它在大多数浏览器上运行得相当不错。
将代码放在网页的<head> </head>标记之后，您需要在<body>标记中创建内部链接：
<a href="#home">Go to Home</a>
希望它有所帮助！
Ps：别忘了打电话：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
答案 9 :(得分：0)
我在http://plugins.jquery.com/smooth-scroll/使用了插件平滑滚动。有了这个插件，你只需要包含一个链接到jQuery和插件代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
（链接需要让班级smoothScroll起作用）。
平滑滚动的另一个功能是，ancor名称不会显示在网址中！
答案 10 :(得分：0)
作品
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
$(this).on( "click", function() {
var hashname = $(this).attr('href').replace('#_', '');
if($(this).attr('href') == "#_") {
$('html, body').animate({ scrollTop: 0 }, 300);
}
else {
var target = $('a[name="' + hashname + '"], #' + hashname),
targetOffset = target.offset().top;
if(targetOffset >= 1) {
$('html, body').animate({ scrollTop: targetOffset-60 }, 300);
}
}
});
});
答案 11 :(得分：0)
我讨厌在我的代码中添加函数命名的类，所以我把它放在一起。如果我要停止使用平滑滚动，我会觉得有必要通过我的代码，并删除所有class =“scroll”的东西。使用这种技术，我可以评论5行JS，整个站点更新。 ：）
<a href="/about">Smooth</a><!-- will never trigger the function -->
<a href="#contact">Smooth</a><!-- but he will -->
...
...
<div id="contact">...</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// Smooth scrolling to element IDs
$('a[href^=#]:not([href=#])').on('click', function () {
var element = $($(this).attr('href'));
$('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
return false;
});
</script>
<强>要求：
1. <a>元素必须具有以#开头并且不仅仅是#的href属性。
2.页面上具有匹配id属性的元素
它的作用：
1.该函数使用href值创建anchorID对象
- 在示例中，$('#contact')，/about以/开头
2. HTML和BODY动画到anchorID的顶部偏移量
- speed ='normal'（'fast'，'slow'，毫秒，）
- 宽松='摇摆'（'线性'等等...谷歌宽松）
3. return false - 它阻止浏览器在URL中显示哈希
- 脚本在没有它的情况下工作，但它不是“ smooth ”。