平滑滚动如何使用摘录?
问题描述:
我有这个代码,它运作良好。平滑滚动如何使用摘录?
$('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://codepen.io/zoom/pen/ggYaXZ 我不aplly希望它< li><a href="#apple">Scroll to Section Apple</a></li>
答
你可以使用一些其他data-
属性:
$('a[href*="#"]:not([href="#"]):not([data-no-smooth-scroll])').click(function() {
而且你html
里面添加data-no-smooth-scroll="true"
到相关链接:
<a href="#apple" data-no-smooth-scroll="true">Scroll to Section Apple</a>
以下是您的Codepen叉子:
http://codepen.io/anon/pen/dNbYKe
答
您可以制作一个if
语句,该语句将删除每个具有某个类的元素(即class="notThis"
)的平滑滚动。
在这种情况下,您必须将该类添加到#apple
链接元素:<a class="notThis" href="#apple">Scroll to Section Apple</a>
。
这将是这样的
$('a[href*="#"]:not([href="#"])').click(function() {
if ($(this).attr("class") !== "notThis"){
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;
}
}
}
});
THKS这是个好主意 – Dmi