Stable
This commit is contained in:
@@ -1,31 +1,31 @@
|
||||
const scrollButtons = `
|
||||
<a href="#up" id="scroll-up" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: sticky; position: fixed; bottom: 3rem; right: 1rem;">
|
||||
<span class="ing-caret ing-rotate-180 ing-fw"></span>
|
||||
</a>
|
||||
|
||||
<a href="#down" id="scroll-down" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: sticky; position: fixed; bottom: 1rem; right: 1rem;">
|
||||
<span class="ing-caret ing-fw"></span>
|
||||
</a>
|
||||
`
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', scrollButtons);
|
||||
|
||||
const scroll_up = document.querySelector('#scroll-up');
|
||||
const scroll_down = document.querySelector('#scroll-down');
|
||||
|
||||
scroll_up.style.transition = scroll_down.style.transition = 'display 1.5s ease-in-out';
|
||||
scroll_up.style.display = scroll_down.style.display = 'none';
|
||||
|
||||
scroll_up.addEventListener('click', () =>
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' }))
|
||||
|
||||
|
||||
scroll_down.addEventListener('click', () =>
|
||||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }))
|
||||
|
||||
const check = () => {
|
||||
scroll_down.style.display = (window.scrollY + window.innerHeight) > document.body.scrollHeight * .8 ? 'none' : 'block'
|
||||
scroll_up.style.display = (window.scrollY) < document.body.scrollHeight * .2 ? 'none' : 'block'
|
||||
}
|
||||
|
||||
['scroll', 'resize'].forEach(e => window.addEventListener(e, check))
|
||||
const scrollButtons = `
|
||||
<a href="#up" id="scroll-up" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: sticky; position: fixed; bottom: 3rem; right: 1rem;">
|
||||
<span class="ing-caret ing-rotate-180 ing-fw"></span>
|
||||
</a>
|
||||
|
||||
<a href="#down" id="scroll-down" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: sticky; position: fixed; bottom: 1rem; right: 1rem;">
|
||||
<span class="ing-caret ing-fw"></span>
|
||||
</a>
|
||||
`
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', scrollButtons);
|
||||
|
||||
const scroll_up = document.querySelector('#scroll-up');
|
||||
const scroll_down = document.querySelector('#scroll-down');
|
||||
|
||||
scroll_up.style.transition = scroll_down.style.transition = 'display 1.5s ease-in-out';
|
||||
scroll_up.style.display = scroll_down.style.display = 'none';
|
||||
|
||||
scroll_up.addEventListener('click', () =>
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' }))
|
||||
|
||||
|
||||
scroll_down.addEventListener('click', () =>
|
||||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }))
|
||||
|
||||
const check = () => {
|
||||
scroll_down.style.display = (window.scrollY + window.innerHeight) > document.body.scrollHeight * .8 ? 'none' : 'block'
|
||||
scroll_up.style.display = (window.scrollY) < document.body.scrollHeight * .2 ? 'none' : 'block'
|
||||
}
|
||||
|
||||
['scroll', 'resize'].forEach(e => window.addEventListener(e, check))
|
||||
|
||||
Reference in New Issue
Block a user