Back to Top

Domma.elements.backToTop('#back-to-top', {
    showAfter: 300,   // Show after scrolling 300px
    duration: 500     // Scroll animation duration in ms
});

// Get the Web Component element
const btn = $('domma-back-to-top')[0];

// Call methods
btn.scroll();              // Scroll to top
btn.show();                // Show button immediately
btn.hide();                // Hide button
btn.toggle();              // Toggle visibility
btn.isVisible();           // Check visibility → boolean
btn.getButton();           // Get button element

// Update attributes programmatically
btn.setShowAfter(500);     // Change threshold
btn.setPosition('bottom-left'); // Change position
btn.setOffset(24);         // Change offset

// Listen for events
btn.addEventListener('show', (e) => {
    console.log('Button appeared');
});

btn.addEventListener('hide', (e) => {
    console.log('Button hidden');
});

<domma-back-to-top id="my-btn"></domma-back-to-top>

<script>
const btn = $('#my-btn')[0];

// Listen for show event
btn.addEventListener('show', (e) => {
    console.log('Button became visible');
    $('#status')[0].textContent = 'Visible';
});

// Listen for hide event
btn.addEventListener('hide', (e) => {
    console.log('Button became hidden');
    $('#status')[0].textContent = 'Hidden';
});
</script>

import { useRef, useEffect } from 'react';

function MyComponent() {
    const btnRef = useRef(null);

    useEffect(() => {
        const btn = btnRef.current;

        const handleShow = () => console.log('Visible');
        btn.addEventListener('show', handleShow);

        return () => btn.removeEventListener('show', handleShow);
    }, []);

    return <domma-back-to-top ref={btnRef} show-after="300" />;
}

<template>
    <domma-back-to-top
        ref="backToTop"
        :show-after="300"
        :duration="500"
        @show="onShow"
        @hide="onHide"
    ></domma-back-to-top>
</template>

<script>
export default {
    methods: {
        onShow() { console.log('Visible'); },
        onHide() { console.log('Hidden'); }
    },
    mounted() {
        this.$refs.backToTop.scroll();
    }
};
</script>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-my-component',
    template: `
        <domma-back-to-top
            #backToTop
            show-after="300"
            (show)="onShow()"
            (hide)="onHide()"
        ></domma-back-to-top>
    `
})
export class MyComponent {
    @ViewChild('backToTop') backToTop!: ElementRef;

    onShow() { console.log('Visible'); }
    onHide() { console.log('Hidden'); }

    scrollToTop() {
        this.backToTop.nativeElement.scroll();
    }
}