Scroll balk blijft in beeld

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ronald Smit

Ronald Smit

21/10/2020 20:45:40
Quote Anchor link
Ik heb nog een scrol balk geïmplementeerd in een html website werkt perfect, alleen scrol balk blijft in beeld, ik moet helemaal naar beneden scrollen en dan weer naar boven dan is het pas uit het beeld, het verschijnt zodra je weer naar beneden gaat scrollen en dat is goed. Als ik de site meteen open dan zie ik gelijk de balk dat hoort niet.

Ik heb hier en daar wat dingen getest maar werkt niet volgens mij zit er een fout in het scriptcode of er ontbreekt iets.

Kan iemand helpen?

hier is de complete code.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<body>
        
        <style>
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 46px;
            height: 42px;
            z-index: 9999;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 0.2s ease-out;
            background-image: url(top.png);
        }
        .back-to-top:hover{
            opacity: 0.7;
        }

        </style>
        <script src='jquery-3.0.0.js' type='text/javascript'></script>
        <script>
        $(document).ready(function(){
    
            //Check to see if the window is top if not then display button
            $(window).scroll(function(){

                // Show button after 100px
                var showAfter = 100;
                if ($(this).scrollTop() > showAfter) {                
                    $('.back-to-top').fadeIn();
                } else {  
                    $('.back-to-top').fadeOut();
                }
            });
            
            //Click event to scroll to top
            $('.back-to-top').click(function(){
                $('html, body').animate({scrollTop : 0},800);
                return false;
            });
            
        });
        </script>
    <a href="#" class="back-to-top"></a>

Edit:
Code tags geplaatst.
Gewijzigd op 21/10/2020 23:16:39 door - Ariën -
 
PHP hulp

PHP hulp

19/03/2024 12:10:48
 
- Ariën  -
Beheerder

- Ariën -

21/10/2020 20:48:30
Quote Anchor link
Heb je een linkje naar een werkend voorbeeld?
 
Ronald Smit

Ronald Smit

21/10/2020 20:56:29
Quote Anchor link
http://jeautorijbewijshalen.nl/

hier een link, ik heb nog een andere probleem muziek werkt alleen op index http://jeautorijbewijshalen.nl/index.html niet hier http://jeautorijbewijshalen.nl.
 
- Ariën  -
Beheerder

- Ariën -

21/10/2020 23:16:08
Quote Anchor link
Ik kan het helaas niet reproduceren.

Ik raad wel aan om je HTML-document even na te lopen. Want ik zie halverwege een body staan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<body style="padding:0px;................... >
 
Ozzie PHP

Ozzie PHP

22/10/2020 00:46:36
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
        .back-to-top {
            display: none;              <= deze regel toevoegen
            position: fixed;

Hierboven de oplossing voor je probleem.

Daarnaast klopt het wat Ariën hierboven zegt. Er komt meerdere keren een <body> tag voor in je code. Dat hoort niet en je html-code is daardoor niet valide.

PS

>> Ik heb nog een scrol balk geïmplementeerd in een html website werkt perfect, alleen scrol balk blijft in beeld

Dat is geen scroll balk, maar een scroll-to-top knop.
Gewijzigd op 22/10/2020 00:48:34 door Ozzie PHP
 
Ronald Smit

Ronald Smit

22/10/2020 08:38:01
Quote Anchor link
Bedankt voor de hulp.

Probleem is nu opgelost. De enige wat ik nog niet weet is die muziek op index.html, werkt alleen op http://jeautorijbewijshalen.nl/index.html niet hier http://jeautorijbewijshalen.nl.

Klopt, dat is een button scroll to top.
 
Ozzie PHP

Ozzie PHP

22/10/2020 12:02:52
Quote Anchor link
Of de muziek wel of niet speelt, hangt af van je browser. In Firefox hoor ik niks. In Edge begint ie in beide gevallen wel automatisch met spelen.

Wat je je wel moet afvragen is of je dat wil. Tegenwoordig zitten mensen niet meer te wachten op filmpjes of muziek die automatisch afspelen. Daarom blokkeren steeds meer browsers dat.

Dat deuntje wat ik nu bij jou hoor, vind ik persoonlijk niet prettig. Alsof er zojuist iemand is overleden. Volgens mij is dat nu precies niet het gewenste effect. Voor mij komt zoiets vrij amateuristisch over en het is niet meer van deze tijd. Ik zou het je dan ook afraden.
 
Ronald Smit

Ronald Smit

22/10/2020 12:14:14
Quote Anchor link
Bedankt voor je reactie.

Ik heb haar ook geadviseerd om het niet te doen. Zij wilt graag muziek op de homepage.

Maar nu weet ik dat het door e browsers komt.

Heel erg bedankt allemaal.





Toevoeging op 22/10/2020 12:15:09:

Ronald Smit op 22/10/2020 12:14:14:
Bedankt voor je reactie.

Ik heb haar ook geadviseerd om het niet te doen. Zij wilt graag muziek op de homepage.

Maar nu weet ik dat het door de browsers komt.

Heel erg bedankt allemaal.



Gewijzigd op 22/10/2020 12:14:43 door Ronald Smit
 
- Ariën  -
Beheerder

- Ariën -

22/10/2020 13:09:31
Quote Anchor link
Ikzelf ben ook niet echt zo voor muziek. Ik vind het echt snoei irritant als ik zelf muziek speel, en opeens wordt het nummer verpest doordat er een ander nummer doorheen schalt. Dit kan haar zelf potentiële klanten kosten.
 
Artur Noubel

Artur Noubel

26/10/2020 16:45:35
Quote Anchor link
Ozzie PHP op 22/10/2020 00:46:36:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
        .back-to-top {
            display: none;              <= deze regel toevoegen
            position: fixed;

Hierboven de oplossing voor je probleem.

Daarnaast klopt het wat Ariën hierboven zegt. Er komt meerdere keren een <body> tag voor in je code. Dat hoort niet en je html-code is daardoor niet valide router login.

PS

>> Ik heb nog een scrol balk geïmplementeerd in een html website werkt perfect, alleen scrol balk blijft in beeld

Dat is geen scroll balk, maar een scroll-to-top knop.


Dit is een geweldige oplossing voor het probleem, blij lid te worden van uw gemeenschap.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.