Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2025-01-29 19:07:30 +01:00
Code Issues Releases Wiki Activity

Improved back-to-top button during fast scrolling

Browse Source
This commit is contained in:
squidfunk 2022-06-05 13:49:03 +02:00
parent a2ccd7327a
commit f1cfe4c07f
10 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/javascripts/bundle.7f366e99.min.js → material/assets/javascripts/bundle.f9fdf24d.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.7f366e99.min.js.map → material/assets/javascripts/bundle.f9fdf24d.min.js.map
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.5d38496d.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.ed05e878.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.5d38496d.min.css.map → material/assets/stylesheets/main.ed05e878.min.css.map
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -34,7 +34,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.5d38496d.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ed05e878.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">
@ -169,7 +169,7 @@
</div> </div>
</div> </div>
{% if "navigation.top" in features %} {% if "navigation.top" in features %}
<a href="#" class="md-top md-top--hidden md-icon" data-md-component="top"> <a href="#" class="md-top md-icon" data-md-component="top" hidden>
{% include ".icons/material/arrow-up.svg" %} {% include ".icons/material/arrow-up.svg" %}
{{ lang.t('top.title') }} {{ lang.t('top.title') }}
</a> </a>
@ -216,7 +216,7 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.7f366e99.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.f9fdf24d.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %} {% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script> <script src="{{ path | url }}"></script>
{% endfor %} {% endfor %}

4
src/assets/javascripts/components/top/index.ts
View File

@ -139,7 +139,7 @@ export function mountBackToTop(
/* Handle emission */ /* Handle emission */
next({ hidden }) { next({ hidden }) {
el.classList.toggle("md-top--hidden", hidden) el.hidden = hidden
if (hidden) { if (hidden) {
el.setAttribute("tabindex", "-1") el.setAttribute("tabindex", "-1")
el.blur() el.blur()
@ -151,7 +151,7 @@ export function mountBackToTop(
/* Handle complete */ /* Handle complete */
complete() { complete() {
el.style.top = "" el.style.top = ""
el.classList.add("md-top--hidden") el.hidden = true
el.removeAttribute("tabindex") el.removeAttribute("tabindex")
} }
}) })

3
src/assets/stylesheets/main/layout/_tabs.scss
View File

@ -26,6 +26,9 @@
// Navigation tabs // Navigation tabs
.md-tabs { .md-tabs {
// Must be higher than the z-index of the back-to-top button, or the button
// will overlay the navigation tabs bar when scrolling up fast.
z-index: 3;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);

3
src/assets/stylesheets/main/layout/_top.scss
View File

@ -29,6 +29,7 @@
position: fixed; position: fixed;
top: px2rem(48px + 16px); top: px2rem(48px + 16px);
z-index: 2; z-index: 2;
display: block;
margin-inline-start: 50%; margin-inline-start: 50%;
padding: px2rem(8px) px2rem(16px); padding: px2rem(8px) px2rem(16px);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
@ -55,7 +56,7 @@
} }
// Back-to-top button is hidden // Back-to-top button is hidden
&--hidden { &[hidden] {
transform: translate(-50%, px2rem(4px)); transform: translate(-50%, px2rem(4px));
opacity: 0; opacity: 0;
transition-duration: 0ms; transition-duration: 0ms;

3
src/base.html
View File

@ -307,8 +307,9 @@
{% if "navigation.top" in features %} {% if "navigation.top" in features %}
<a <a
href="#" href="#"
class="md-top md-top--hidden md-icon" class="md-top md-icon"
data-md-component="top" data-md-component="top"
hidden
> >
{% include ".icons/material/arrow-up.svg" %} {% include ".icons/material/arrow-up.svg" %}
{{ lang.t('top.title') }} {{ lang.t('top.title') }}