PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
R

Scroll balk blijft in beeld

Door Ronald Smit op 21-10-2020 20:45 gewijzigd op 21-10-2020 23:16
2.426 views
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.


 <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>

- Ariën -
21-10-2020 20:48
Heb je een linkje naar een werkend voorbeeld?
- Ariën -
21-10-2020 23:16
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:

<body style="padding:0px;................... >
Ozzie PHP
22-10-2020 00:46 gewijzigd op 22-10-2020 00:48 

        .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.
Ozzie PHP
22-10-2020 12:02
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.
R Ronald Smit
22-10-2020 12:14 gewijzigd op 22-10-2020 12: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 e browsers komt.

Heel erg bedankt allemaal.





[size=xsmall]Toevoeging op 22/10/2020 12:15:09:[/size]

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.






- Ariën -
22-10-2020 13:09
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.
? Onbekende gebruiker
26-10-2020 16:45
Ozzie PHP op 22/10/2020 00:46:36


        .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.

Reageren

Inloggen om te reageren