JavaScript Mobilgeräte: Focus von Button nach antippen entfernen

[Pfandfinder]

hi,

ich habe einen To-Top-button auf meiner seite. per CSS ist geregelt dass sich die Farbe bei hover und active ändert. Problem ist da aber auf Handys, dass wenn man den button antippt, hoch gescrollt wird, und wenn man wieder herunterscrollt er immer noch focus hat und somit die andere Farbe. erst beim Tipp wo anders hin geht das weg. Kann man das irgendwie per JS lösen ? Den Focus quasi wegnehmen sobald die scroll-Animation durch ist ?

const scrollToTopBtn = document.getElementById('scrollToTopBtn');
if (scrollToTopBtn) {
    window.addEventListener('scroll', function() {
        if (window.scrollY > 200) {
            scrollToTopBtn.classList.add('show');
        } else {
            scrollToTopBtn.classList.remove('show');
        }
    }, { passive: true });

    scrollToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

this.blur() und scrollToTopBtn.blur() geht nicht.

 

[Gizzmow]

hast du das hier schon mal ausprobiert? Einfach nach der Animation den Style zu ändern?

 

[User38]

const toTopBtn = document.querySelector("#toTopBtn");

toTopBtn.addEventListener("click", () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });

setTimeout(() => {
        toTopBtn.blur();
    }, 500);
});

Damit kann man den Fokus nach dem Klick entfernen.

 

[netzgestaltung]

oder einfach einem anderen Element den Fokus geben. Am besten, da wo es sozusagen auch inhaltlich weitergeht