Question

我正在尝试为我的网站创建一个回到顶部的按钮。

以下内容确实导致它无法正常工作：

body[data-smooth-scrolling="1"] #to-top {
    right: 33px;
}

Answer 1

如果你想要一个简单的＆＃34;顶部＆＃34;功能，请执行以下操作：

1。）将目标ID添加到HTML顶部的元素中，如下所示：

<body>
    <div id="ToTopTarget">
       content
    </div>
</body>

2。）添加一个锚链接来定位：

<a href="#ToTopTarget">Back To Top</a>

总而言之，您拥有以下示例代码：

<body>
    <div id="ToTopTarget">
       content
    </div>
    <a href="#ToTopTarget">Back To Top</a>
</body>

如果您想要描述您的示例的功能，请查看Huangism的解释。

Answer 2

添加到Sebsemillia的答案，将以下内容添加到<head>应该将滚动设置为顶部:(假设加载了jQuery）

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('a[href*="#"]').click(function() {
        var anchor = $('#'+this.href.split('#')[1]);
        $('html,body').animate({scrollTop: anchor.offset().top},'slow');
        return false;
    });
});
</script>

回到顶部按钮

2 个答案: