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）

问题是我的项目中的所有按钮在点击后都消失了。我可以看到我的浏览器放在那里的环，但是fysical按钮消失了...... 这个问题似乎不会发生在小提琴中（代码在小提琴中根本不起作用）。

有谁知道我应该怎么解决这个问题，麻烦是什么问题？我想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提供带有CSS的链接的属性，用于没有href的标记，例如：

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

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

它促进了突兀的Javascript的实践 - 这已经证明难以维护并且难以扩展。有关详情，请参阅 Unobtrusive JavaScript 。
现在有更好，更容易，更易于维护和可扩展的方法来实现所需的结果。

不引人注目的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

点击

1 个答案:

不引人注目的Javascript方式

更新