Hello everyone, i have one questiion for you. I am new to livewire and i am still beginner programmer. Can you anyone please give me advice how to implement back to top of website button in livewire layout app main component. Iam building almost static website in it and i dont understand how to implement it into main component. If i should make stand alone component like "back to top button" or if i should create code for this riight into main app blade component through with tag. Every section is included in one page.
this is code of my main app blade component
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" defer>
<link rel="stylesheet" href="{{ url('/css/app.css') }}" defer>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" defer>
<title>{{ $title ?? 'Std27 Barbershop' }}</title>
</head>
<body>
<livewire:navbar />
<livewire:home />
<livewire:about />
<livewire:services />
<livewire:gallery />
{{-- <livewire:booking/> --}}
<livewire:footer />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="{{ url('/js/script.js') }}"></script>
</body>
</html>
Thank you for your possibly advices :)
A Back to Top feature does not require Livewire, or Javascript; you can link to the navbar (or anything at the top of the document) once it has an id you can reference. If you would like, you can add smooth scrolling using CSS:
html {
scroll-behavior: smooth;
}
@tykus thanks a lot. I thought that this will be here more complicated.
Please or to participate in this conversation.