javascript - 单击时元素消失

Question

我正在尝试用 Jquery 做一些事情，但似乎出了点问题。

首先关闭一些代码，

我的 HTML，

<a href="#" onclick="return false;" class="scrollToTop"></a>

我的 CSS，

.scrollToTop {
    width: 40px;
    height: 40px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
    background-color: #CFCFCF;
    background-image: url(../img/upActive.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: fixed;
    bottom: 61px;
    right: 30px;
    transition: opacity 2s ease-in;
}

.scrollToTop:hover {
    background-color: #989898;
    text-decoration: none;
    transition: opacity 2s ease-in;
}   

我的 Jquery，

$(document).ready(function() {
    var hidden = $('.scrollToTop');
    hidden.hide();

    // Check to see if the window is top if not then display button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            hidden.show(1000);
        } else {
            hidden.hide(1000);
        }
    });

    // Click event to scroll to top
    $('.scrollToTop').click(function(e) {
        $('html, body').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

});

JSfiddle:Fiddle (感谢 vasilenicusor)

问题是我元素中的所有按钮在单击后都消失了。我可以看到我的浏览器放在它们周围的圆环，但是物理按钮消失了..这个问题似乎并没有在 fiddle 中发生(代码在 fiddle 中根本不起作用)。

有谁知道我应该如何解决这个问题，也许是什么问题？我猜 Jquery 代码中的某些东西正在使按钮执行此操作。 (大约有 8 个 Jquery 文件和 100 多行代码，其中大部分是库的)。

下面的代码不起作用。我试过了。

(function(e) 
{ 
    e.preventDefault; 
}); 

提前致谢!

感谢 Chun 的回答!但是我的代码中的问题似乎是，当链接为“href”时，似乎有一些库导致了这种“消失”的效果。暂时删除“href”解决了我的问题。

Answer 1

你可以只使用 href="javascript:void(0)"而不是 href="#" onclick="return false;"

<a href="javascript:void(0)" class="scrollToTop"></a>
    <!-- OR better -->
<a class="scrollToTop"></a>
    <!-- OR even better -->
<span class="scrollToTop"></span>

然后给出 scrollToTop没有 href 的带有 CSS 标记的链接的属性，比如:

.scrollToTop { cursor: pointer; color: blue; }

拥有<a href="#" onclick="myJsFunc();">Link</a>或 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或任何其他包含 onclick 的内容属性 - 几年前还可以，但现在它可能是一种不好的做法。原因如下:

1. 它促进了侵入式 Javascript 的实践——事实证明这种做法难以维护且难以扩展。 Unobtrusive JavaScript 中有更多相关信息.

2. 现在有更好、更简单、更易于维护和可扩展的方法来实现预期结果。

不显眼的 Javascript 方式

只是没有 href属性可有可无!任何好的 CSS 重置都会处理丢失的默认光标样式，因此这不是问题。然后，如果您有一个 Javascript 功能可以使用优雅且不显眼的最佳实践来附加 - 由于您的 Javascript 逻辑保留在 Javascript 中而不是在您的标记中，因此更易于维护 - 这在您开始开发大型 Javascript 应用程序时是必不可少的。

<a class="scrollToTop">Cancel this action</a>

// Cancel click event
$('.scrollToTop').click(function(){
    alert('Cancel action occurs!');
});

.scrollToTop { cursor: pointer; color: blue; }
.scrollToTop:hover { text-decoration: underline; }

---

更新

我也忘了说，为此更改您的滚动到顶部功能:

// Click to scroll to top
$(".scrollToTop").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
});

在这里查看 jsfiddle 示例: https://jsfiddle.net/x1x9pmpx