vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

'Return to top' button is always visible in custom layout page #3811

Open 2BAB opened 3 weeks ago

2BAB commented 3 weeks ago

Describe the bug

It's always visible even you're already at the top, similar to this one https://github.com/vuejs/vitepress/issues/2312, however, it happened to custom layout on mobile devices (with narrow viewport width) this time.

image

Reproduction

  1. Add below to index.md:
---
layout: foo
navbar: false
sidebar: false
---
  1. Create the Foo.vue:
<template>
    <div style="width: 100%; 
        height: 2000px; 
        background-color: gray; 
        overflow: scroll;">
        ajidsjaisdjiajsiiajsdijasid
    </div>
</template>
  1. register it in the index.ts:
app.component('foo', Foo)

Then we will observe the bug like the above screenshot.

Expected behavior

  1. It can be automatically hide or show depend on the page location.
  2. It can be explicitly disable in configurations, like themeConfig: { ... returnToTop: false, ...}.

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 11.13 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 124.0.6367.60
    Chrome Canary: 126.0.6425.0
    Safari: 17.4.1
  npmPackages:
    vitepress: ^1.1.0 => 1.1.0

Additional context

No response

Validations