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

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

下面是简单的JS代码剪辑

$(document).ready(function () {

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

    $(‘.scrollup’).click(function () {
$(“html, body”).animate({
scrollTop: 0
}, 600);
return false;
});

这是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。

“在网页中简单快速添加回顶部 (JavaScript)”的2个回复

  1. 补充说明。图片得要自己找放在css代码可识别的位置。

    这里是在garland-f86f3309/icon_top.png

发表回复

您的电子邮箱地址不会被公开。