回到头部

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #GoTop {
            position: fixed;
            right: 160px;
            bottom: 50px;
            display: none;
            width: 20px;
            height: 80px;
            background: url("images/icon.png") right top no-repeat;
            background-color: #eee;
            background-position: -71px -90px;
            border: solid 2px #eee;
            font-size: 11px;
        }


            #GoTop:hover {
                background-position: -96px -90px;
            }
    </style>
    <script src="Jquery1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 100) {
                    $('#GoTop').fadeIn(1000);
                } else {
                    $('#GoTop').fadeOut(1000);
                }
            });
            $('#GoTop').hover(function () {
                $(this).css('background-color', '#fafafa')
                $('#fontdiv').css('background-color', '#fafafa')


            }, function () {
                $(this).css('background-color', '#eee')
                $('#fontdiv').css('background-color', '#eee')
            });
            $('#GoTop').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });
        })
    </script>
</head>
<body style="height: 1000px;">
    <div id="GoTop">
        <div id="fontdiv" style="background-color: #eee; margin-top: 25px;">
            <div style="padding-left: 4px;">
                返回顶部
            </div>
        </div>
    </div>
</body>
</html>
### 实现 VitePress 面顶部按钮的方法 为了在 VitePress 中添加返回面顶部的功能,可以利用 Vue 组件的方式自定义布局并加入滚动监听逻辑。具体来说,在项目中的 `.vuepress/components` 文件夹下创建一个新的组件 `BackToTop.vue`。 ```html <template> <div class="back-to-top" @click="scrollToTop"> ↑ </div> </template> <script setup> import { onMounted, onUnmounted } from 'vue' const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }) } let scrollHandler = null; onMounted(() => { scrollHandler = function() { const backToTopElement = document.querySelector('.back-to-top') if (window.scrollY > 200) { backToTopElement.style.display = 'block' } else { backToTopElement.style.display = 'none' } }; window.addEventListener('scroll', scrollHandler); }) onUnmounted(() => { window.removeEventListener('scroll', scrollHandler) }) </script> <style scoped> .back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; /* 默认隐藏 */ cursor: pointer; } </style> ``` 接着需要修改主题配置文件 `_config.js` 或者通过 frontmatter 来注册这个全局可用的组件[^1]: ```javascript module.exports = { themeConfig: { layout: ['BackToTop'] }, }; ``` 这样当用户浏览到一定距离时就会显示该按钮,并且点击之后能够平滑地滚回面最上方位置[^2]。 #### 注意事项 - 需要确保引入此组件的位置不会影响原有样式和其他交互效果。 - 可以根据需求调整触发条件以及动画效果等参数设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值