Back to top probleem!
Part 1
Part 2
Het probleem is als ik naar beneden scroll dat de ; "Back to top" button niet te voorschijn komt.
Wie kan mij hier mee helpen?
index.html :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
<title>Back to top</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="backtotop">
<div>Back to top</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='js/backtotop.jquery.js'></script>
<script>
$('#backtotop').backtotop({
'position': 1000,
'speed': 500
});
</script>
</body>
</html>
<html>
<head>
<title>Back to top</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="backtotop">
<div>Back to top</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='js/backtotop.jquery.js'></script>
<script>
$('#backtotop').backtotop({
'position': 1000,
'speed': 500
});
</script>
</body>
</html>
backtotop.jquery.js
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
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
(function($){
$.fn.backtotop = function(options) {
var this_ = this;
var settings = $.extend({
'position': 1000,
'speed': 500
}, options);
//settings
var position = settings['position'];
var speed = settings['speed'];
this_.css({
'left': $(document).width() / 2 - this_.width() / 2
});
$(document).scroll(function() {
var scroll_pos = $(window).scrollTop();
if (scroll_pos >= position) {
this_.fadeIn(speed);
} else {
this_.fadeOut(speed);
}
});
this_.click(function() {
$(window).scrollTop(0);
});
}
}) (jQuery);
$.fn.backtotop = function(options) {
var this_ = this;
var settings = $.extend({
'position': 1000,
'speed': 500
}, options);
//settings
var position = settings['position'];
var speed = settings['speed'];
this_.css({
'left': $(document).width() / 2 - this_.width() / 2
});
$(document).scroll(function() {
var scroll_pos = $(window).scrollTop();
if (scroll_pos >= position) {
this_.fadeIn(speed);
} else {
this_.fadeOut(speed);
}
});
this_.click(function() {
$(window).scrollTop(0);
});
}
}) (jQuery);
styles.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
font-family:Arial;
font-size:62.5%;
height:3000px;
}
#backtotop {
display:none;
position:fixed;
width:250px
background:#000;
border-radius:5px;
opacity:0.6;
cursor:pointer;
}
#backtotop div {
text-align:center;
padding:10px 0 10px 0;
font-size:1.4em;
color:#fff;
}
font-family:Arial;
font-size:62.5%;
height:3000px;
}
#backtotop {
display:none;
position:fixed;
width:250px
background:#000;
border-radius:5px;
opacity:0.6;
cursor:pointer;
}
#backtotop div {
text-align:center;
padding:10px 0 10px 0;
font-size:1.4em;
color:#fff;
}
Gewijzigd op 30/01/2012 19:24:24 door Lars Venema
Merijn Venema op 30/01/2012 19:22:42:
Als ik de code goed lees betekent dat de knop op dit moment niet getoond hoort te worden. Je pagina is te kort. Als je naar beneden zou kunnen scrollen, zou de knop te voorschijn moeten komen. Probeer eens een extra div toe te voegen en te vullen met content. Als je dan naar beneden scrollt zou de knop tevoorschijn moeten komen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
font-family:Arial;
font-size:62.5%;
height:3000px;
}
#backtotop {
display:none;
position:fixed;
width:250px
background:#000;
border-radius:5px;
opacity:0.6;
cursor:pointer;
}
#backtotop div {
text-align:center;
padding:10px 0 10px 0;
font-size:1.4em;
color:#fff;
}
font-family:Arial;
font-size:62.5%;
height:3000px;
}
#backtotop {
display:none;
position:fixed;
width:250px
background:#000;
border-radius:5px;
opacity:0.6;
cursor:pointer;
}
#backtotop div {
text-align:center;
padding:10px 0 10px 0;
font-size:1.4em;
color:#fff;
}
Deze css hoort er nog bij.
vergeten!
Merijn Venema op 30/01/2012 20:11:13:
Ik merk het al, ik had al een heel verhaal klaar, maar je mist een ; achter width: 250px in je #backtotop. Hierdoor wordt de achtergrond niet zwart :)
Dat is dat over het hoofd heb gezien.
Maar toch bedankt! :D
Merijn Venema op 30/01/2012 20:18:14:
Is het nu opgelost? Ik heb de code intussen gekopieerd en bij mij werkt de code zoals je die hebt aangeleverd, dus als het goed is hoort het bij jou ook te werken. Kun je dit bevestigen?
Ja, het werkt!