您好 :) 我有一个脚本,可以在您单击 anchor 时添加淡入淡出效果。
但它针对我所有的 anchor 。是否存在避免从特定链接执行的空白,例如页脚中的“返回顶部”链接。它为该链接添加了效果,并且不要停下来,因为没有目标 url。
JS:
// Page transitions and preventing FOUC(flash of unstyled content).
jQuery.holdReady(true);
jQuery("body").css("opacity", 0);
jQuery.holdReady(false);
jQuery(function ($) {
$("body").fadeTo(1500, 1);
$(document).on("click", "a", function (event) {
// get the href attribute
// "this" is still the <a> element here
var newUrl = $(this).attr("href");
event.preventDefault();
$("body").fadeTo(800, 0, function () {
//here, where you were trying to get the url, "this"
//points to the animated element, ie body
// veryfy if the new url exists or is a hash
if (!newUrl || newUrl[0] === "#") {
// set that hash
location.hash = newUrl;
return;
}
//just update the location without fading in at this point
location = newUrl;
// prevent the default browser behavior.
return false;
});
});
});
页面顶部的链接如下所示:
<a class="to-top" href="#masthead">
<svg class="skull-up">
<use xlink:href="#skull"></use>
</svg>
<span class="screen-reader-text">Tilbage til top</span>
</a>
最佳答案
使用event.stopPropagation();
$(document).on("click", "a", function (event) {
alert('Clicked on a');
return false;
});
$('.to-top').on('click', function(event){
event.stopPropagation();
alert('Clicked on a with class "to-top"');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a href="#something">I am a tag</a>
<a class="to-top" href="#something">I am a tag to top</a>
关于javascript - 停止在特定链接上执行 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30457139/