PHP code example of dasformt / kirby-backtotop

1. Go to this page and download the library: Download dasformt/kirby-backtotop library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

dasformt / kirby-backtotop example snippets


 snippet('backtotop') 

return [
    'dasformt.backtotop' => [
        // Button aktivieren/deaktivieren
        'enabled' => true,

        // Scroll-Verhalten
        'offset' => 300, // Ab wann erscheint der Button (px)
        'offsetOpacity' => 1200, // Fade-Effekt Position (px)
        'scrollDuration' => 700, // Scroll-Animation in ms

        // Button-Styling
        'button' => [
            'size' => '60px', // Button-Größe
            'radius' => '100px', // Border-Radius
            'position' => [
                'bottom' => '30px', // Abstand unten
                'right' => '40px' // Abstand rechts
            ],
            'colors' => [
                'background' => 'var(--primary, #008ED9)', // Hintergrundfarbe
                'hover' => 'var(--primary-dark, #007BC0)', // Hover-Farbe
                'opacity' => 0.5, // Transparenz
                'hoverOpacity' => 1 // Hover-Transparenz
            ],
            'zIndex' => 1000
        ],

        // Responsive Design
        'responsive' => [
            'tablet' => [
                'bottom' => '40px',
                'size' => '55px'
            ],
            'desktop' => [
                'bottom' => '50px',
                'size' => '60px'
            ]
        ],

        // Accessibility
        'aria' => [
            'label' => 'Zurück nach oben',
            'hidden' => 'Zum Seitenanfang scrollen'
        ]
    ]
];


'dasformt.backtotop' => [
    'button' => [
        'size' => '80px'
    ]
]


'dasformt.backtotop' => [
    'button' => [
        'colors' => [
            'background' => '#FF0000',
            'hover' => '#CC0000'
        ]
    ]
]