在网页中简单快速添加回顶部 (JavaScript)

通过JavaScript实现回顶部(go to top)的效果可以使用现成的jQuery自带的功能。通过JS功能呼叫一个HTML的页面元素，而这个HTML页面元素可以再通过CSS来美化修饰。

下面是简单的JS代码剪辑

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$(‘.scrollup’).fadeIn();
} else {
$(‘.scrollup’).fadeOut();
}
});

这是HTML代码

<a href=”#” class=”scrollup” title=” Back to top”>Scroll</a>

这是CSS代码

.scrollup {
position: fixed;
bottom: 50px;
right: 150px;
display: none;
text-indent: -9999px;
margin: 0 auto;
width: 65px;
height: 70px;
background-image: url(‘icon_top.png’);
background-size: 65px 69px;
background-repeat: no-repeat;
opacity: 0.5;
z-index: 5;
}
.scrollup:hover {
opacity: 1;
border-radius: 23px;
box-shadow: 0 0 15px 0 lightslategrey;
}

在Drupal里这几个文件分放得很开。JS在drupal 7.34\misc\drupal.js；HTML在drupal 7.34\modules\system\html.tpl.php；CSS在drupal 7.34\sites\default\files\color\garland-f86f3309\style.css。这里说明一下我使用的主题是Garland。