从某些ID中排除滚动动画功能
Exclude scroll animation function from some ID's
我确实添加了JavaScript代码,用于使用菜单对每个带有ID的块进行滚动动画处理。然后我添加了 Bootstrap 的选项卡,由于我的动画滚动而弄乱了。
我想知道如何让我的滚动动画停止在引导选项卡上工作?
滚动动画代码
$(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
}, 800);
return false;
}
}
});
});
引导选项卡
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
我遇到了同样的问题并像这样修复了它。在代码的开头:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {`
您必须在"A"类别中添加一个类。假设您将类scrollnav
添加
它将是这样的:
$(function() {
$('a.scrollnav[href*=#]:not([href=#])').click(function() {`
因此,此代码(平滑滚动)仅适用于具有此类的a
元素。
你的 Java 应该看起来像:
$(function() {
$('a.scrollnav[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
}, 800);
return false;
}
}
});
});
菜单(或其他导航链接)中的每个a
元素都必须具有类scrollnav
。
相关文章:
- 滚动动画代码不起作用
- CSS滚动动画赢得'不要在django跑步
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 如何在没有外部插件的情况下在jQuery中制作一个滚动动画
- 使用鼠标滚轮控制页面滚动动画
- Jquery 代码不适用于页面上的滚动动画
- 滚动动画无法正常工作;当我单击链接时,我被定向但没有动画
- JQuery 页面滚动动画仅适用于镶边
- 滚动动画会断开页面上的链接
- 为什么这个滚动动画不起作用
- 从某些ID中排除滚动动画功能
- 导航栏特定的 jQuery 滚动动画
- 使用 jQuery 和 ScrollMagic 滚动动画时间轴
- 如何使用jQuery在移动网络浏览器上设置滚动动画
- 如何制作水平/垂直滚动动画
- 如何停止滚动动画
- 在单个页面上的各个部分之间滚动动画?(仅限javascript)
- 滚动动画的jQuery错误无法解释
- 随时间平滑滚动动画距离
- 在使滚动动画不触发滚动事件时遇到问题