jQuery的平滑滚动到锚？
有没有办法使用jQuery向下滚动到锚链接？
喜欢：
$(document).ready(function(){ $("#gotomyanchor").click(function(){ $.scrollSmoothTo($("#myanchor")); }); }); ？
下面是我如何做到这一点：
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; } });
那么你只需要像这样创build你的锚点：
<a class="scroll" href="#destination1">Destination 1</a>
你可以在我的网站上看到它。
演示也可在这里： http : //jsfiddle.net/YtJcL/
我将使用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; } } }); });
资料来源 ： http : //css-tricks.com/snippets/jquery/smooth-scrolling/
目前为止我看到的最佳解决scheme： jQuery：平滑滚动内部锚链接
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); }); });
jQuery.scrollTo将做你想要的一切和更多！
你可以传递各种不同的东西：
- 一个原始数字
- 一个string（'44'，'100px'，'+ = 30px'等）
- DOM元素（逻辑上，可滚动元素的子元素）
- select器，将相对于可滚动元素
- string“max”滚动到结尾。
- 一个指定百分比的string，滚动到容器的那一部分（fe：50％到*中间）。
- 散列{top：x，left：y}，x和y可以是任何types的数字/string，如上所述。
这里是我用来快速绑定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; });
我想要一个适用于<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>
试试这个。 这是从我修改的CSS技巧的代码，它是非常简单的，并进行水平和垂直滚动。 需要JQuery。 这里是一个演示
$(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; } } }); });
使用hanoo的脚本，我创build了一个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();
持续时间和宽松的默认值是400ms和“摆动”。
我在我的网站使用这个：
$(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>标记中创build内部链接：
<a href="#home">Go to Home</a>
希望它有帮助！
Ps：别忘了打电话：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
我使用的插件Smooth Scroll ，在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类工作）。
平滑滚动的另一个function是，匿名名称不显示在URL中！
作品
$('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); } } }); });
我讨厌添加函数命名的类到我的代码，所以我把它放在一起。 如果我停止使用平滑滚动，我觉得有必要通过我的代码，并删除所有类=“滚动”的东西。 使用这种技术，我可以注释掉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值创buildanchorID对象
– 在这个例子中，它是$('#contact') ， /about以/
2. HTML和BODY被animation到anchorID的顶部偏移量
– 速度=“正常”（“快”，“慢”，毫秒）
– easing ='swing'（'linear'等等… google easing）
3. return false – 它阻止浏览器在URL中显示哈希
– 脚本没有它，但它不是“ 光滑的 ”。
