2015/03/20

如何使用 jQuery (Javascript) 实现滚动到页面顶部的按钮

你好，这是 naouniverse ( @naouniverse708 )。

我正在使用 jQuery (Javascript) 实现一个滚动到页面顶部的按钮，但由于写入错误，有些页面无法正常工作，所以我重新创建了它。

下面是关于如何实现它的备忘录。

使用 HTML 和 CSS 设计按钮

对于 HTML 部分，在正文中编写以下内容。

<a style="display: block;" class="pagetop" href="#top">↑ 页顶 ↑</a>

href 指定任意位置。

然后，使用 CSS 设计按钮。
我让它感觉简单易懂。
我认为检查关键点并根据自己的喜好进行调整是可以的。

.pagetop{ background-color:rgba(255,0,0,0.8); border-radius:5px; padding:8px; /* 固定显示位置 */ right : 0px; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; z-index: 100; /* 避免在悬停时更改颜色 */ .pagetop :hover{颜色:rgba(0,0,255,0.8);

加载托管在 Google 上的 jQuery 文件

将以下内容写在头部。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

使用 jQuery 控制事件

在 head 中写入以下内容或创建一个包含以下内容的外部 js 文件并加载它。

<script type="text/javascript"> jQuery(function(jQuery) { var pagetop = jQuery('.pagetop'); pagetop.hide(); /* 最初は非表示 */ /* ページスクロール時 */ jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { pagetop.fadeIn(); /* 表示 */ } else { pagetop.fadeOut(); /* 非表示 */ } }); /* ボタンクリック時 */ pagetop.click(function () { jQuery('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>