Scroll balk blijft in beeld
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)
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
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>
<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 -
hier een link, ik heb nog een andere probleem muziek werkt alleen op index http://jeautorijbewijshalen.nl/index.html niet hier http://jeautorijbewijshalen.nl.
Ik raad wel aan om je HTML-document even na te lopen. Want ik zie halverwege een body staan:
Code (php)
1
<body style="padding:0px;................... >
Code (php)
1
2
3
2
3
.back-to-top {
display: none; <= deze regel toevoegen
position: fixed;
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
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.
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.
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.
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
Ozzie PHP op 22/10/2020 00:46:36:
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.
Code (php)
1
2
3
2
3
.back-to-top {
display: none; <= deze regel toevoegen
position: fixed;
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.