WordPress网站返回顶部按钮代码
网站右侧返回顶部按钮
### 实现代码
```
//网站右侧添加返回顶部按钮
function custom_back_to_top_button() {
echo '<a href="#" class="back-to-top">Top</a>';
}
add_action('wp_footer', 'custom_back_to_top_button');
function custom_back_to_top_enqueue_scripts() {
wp_enqueue_style('back-to-top-style', plugins_url('css/back-to-top.css', __FILE__));
wp_enqueue_script('back-to-top-script', plugins_url('js/back-to-top.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_back_to_top_enqueue_scripts');
```
在当前使用主题的 `functions.php` 文件里或者之前分享的 [制作简单WordPress插件](https://www.3bbs.cn/thread-515-1-1.html) 里添加以上代码。
```
/**返回顶部按钮css样式**/
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
width: 50px;
height: 50px;
background-color: #444;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.back-to-top {
width: 35px;
height: 35px;
line-height: 35px;
bottom: 100px;
right: 10px;
}
}
```
在插件里新建一个 `CSS`文件夹，再新建一个 `back-to-top.css`的文件，把上边的代码添加进去。
```
/**返回顶部js按钮**/
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function() {
$('html, body').animate({scrollTop : 0}, 800);
return false;
});
});
```
在插件里新建一个 `js`文件夹，再新建一个 `back-to-top.js`的文件，把上边的代码添加进去。
注：以上代码经过AI分析调整，仅供学习记录。添加之后网页端和手机端右下角都会出现一个 `top`按钮。
页:
[1]