jquery平滑滚动到锚点?
有没有办法使用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;
}
});
然后你只需要创建你的锚是这样的:
<a class="scroll" href="#destination1">Destination 1</a>
你可以看到它在我的website。
的演示,也可以在这里找到:http://jsfiddle.net/YtJcL/
jQuery.scrollTo将做你想要的一切和更多!
你可以传递各种不同的东西:
- 原始数字
- 的字符串('44' , '100px的', '+ = 30PX',等)
- 一个DOM元素(逻辑上,可滚动元素的子元素)
- 选择器,它将相对于可滚动元素
- 字符串'max'滚动到结尾。
- 一个字符串,指定滚动到该容器的该部分的百分比(f.e:50%将*移到中间)。
- 散列{top:x,left:y},x和y可以是任何类型的数字/字符串,如上所述。
这是一个插件吗?因为我试过了,没有发生任何事..我用这个: $ .scrollTo(“#addNewUA”,800,{easing:'elasout'}); – dynamic 2010-11-16 19:55:59
是的,它是一个插件,所以你需要下载并包含它。虽然它非常轻巧,功能也非常棒。 (注意:我没有任何个人联系,除了在很多网站中使用它) – 2010-11-16 20:03:30
我会用从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;
}
}
});
});
如果您希望所有页面内锚链接都可以滚动生成而不需要任何装饰等,这可能是更好的解决方案。否则,jQuery.scrollTo有很多很酷的其他技巧(检查他们的演示页面) – 2011-12-16 15:57:06
这是一个非常棒的插入式解决方案 – 2015-03-06 04:35:52
原则上 - 使用**代码**不**链接** - http://meta.stackexchange.com/ questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – 2015-08-04 11:35:49
这是我用来快速绑定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;
});
看起来您可能需要使用jQuery scrollTo插件才能使用此代码? – 2014-04-15 06:12:29
最好的解决办法: 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);
});
});
这确实是最简单的解决方案,再加上您想要平滑滚动的任何未来链接,只需将“滚动”类添加到链接即可。 – Duncanmoo 2013-05-25 11:45:40
我用我的网站是这样的:
$(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>
我使用的插件平滑滚动,在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
工作)。
Smooth Scroll的另一个功能是,ancor名称不显示在URL中!
使用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();
默认的持续时间和宽松的400ms的时间 “摇摆”。
工作
$('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);
}
}
});
});
我讨厌添加功能,命名类我的代码,所以我把这个在一起而不是。如果我停止使用平滑滚动,我会觉得有必要通过我的代码,并删除所有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')
,开始于/
2. HTML
,和BODY
是动画顶端的anchorID
偏移 - 速度= '正常'( '快',“慢',毫秒)
- easing ='swing'('linear'等... google easing)
3。return false
- 它可以防止浏览器在URL中显示哈希值
- 该脚本没有它,但它不是“平滑”。
试试这个。这是我修改的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;
}
}
});
});
我想,对于<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>
这为我工作:https://css-tricks.com/snippets/jquery/smooth-scrolling/ – maahd 2015-06-18 14:41:59