Det er vel css'en og ikke javascripten.
Et lille trick til dit javascript. lad nu være med, at selecte hvergang. Cache dit jquery objekt.
- $(function(){
-
- var $topbutton = $("<a id='top_knap'></a>");
- $("#indhold").append($topbutton);
-
- $topbutton.css("opacity", 0.3);
- $topbutton.mouseover().css("cursor", "pointer");
-
- $topbutton.css({
- "width" : "32px",
- "height" : "32px",
- "background" : "#999 url(billeder/ikoner/pil_op.png) no-repeat",
- "margin-left" : "-75px",
- "border-radius" : "4px",
- "-moz-border-radius" : "4px",
- "-webkit-border-radius" : "4px",
- "border" : "1px #666 solid",
- "position" : "fixed",
- "bottom" : "10px"
- });
-
- $topbutton.mouseover(function() {
- $topbutton.css("opacity", 1);
- });
-
- $topbutton.mouseout(function() {
- $topbutton.css("opacity", 0.3);
- });
-
- $topbutton.focusout(function() {
- $topbutton.css("opacity", 0.3);
- });
-
- // skjuler id'et (#top) til den, som sender personen tilbage til toppen af siden
- $topbutton.hide();
-
- // fader id'et in/ud (#top), som sender den besøgende tilbage til toppen af siden
- $(function () {
- $(window).scroll(function () {
- if ($(this).scrollTop() > 100) {
- $topbutton.fadeIn();
- } else {
- $topbutton.fadeOut();
- }
- });
-
- // scroller den besøgenes browser tilbage til toppen af browseren med en præ-defineret tid
- // som den har til rådighed, når der klikkes på id'et (#top)
- $topbutton.click(function () {
- $('body,html').animate({
- scrollTop: 0
- }, 800);
- return false;
- });
- });
-
- });
du kan faktisk også chain jQuery. og sæt dit css via css frem for javascript.
- <script>
- $(function(){
- var $body = $("body,html"),
- $topbutton = $("<a id='top_knap'></a>").hide();
-
- // indsæt indhold
- $("#indhold").append($topbutton);
-
- // tilføj eventlistener & hide
- $topbutton.on("click", function (e) {
- $body.animate({scrollTop: 0}, 800);
- return false;
- });
-
- // fader id'et in/ud (#top), som sender den besøgende tilbage til toppen af siden
- $(window).scroll(function () {
- if ($(this).scrollTop() > 100) {
- $topbutton.fadeIn();
- } else {
- $topbutton.fadeOut();
- }
- });
- });
- </script>
-
- <style type="text/css">
- #top_knap {
- width : 32px,
- height : 32px,
- background : #999 url(billeder/ikoner/pil_op.png) no-repeat,
- margin-left : -75px,
- border : 1px #666 solid,
- position : fixed,
- bottom : 10px
- cursor: pointer;
- zoom: 1;
-
- border-radius : 4px,
- -moz-border-radius : 4px,
- -webkit-border-radius : 4px,
-
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
- filter: alpha(opacity=30);
- opacity: 0.3,
- }
-
- #top_knap:hover,
- #top_knap:focus {
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: alpha(opacity=100);
- opacity: 1;
- }
- </style>
Det jeg har gjort, er at javascriptet selv generere html koden på siden, så dem der ikke har javascript slået til, ikke vil behøve at skulle loade html elementer ind, som de ikke kan bruge til noget.
Jeg fandt ud af, hvad det egentlige problem med mit script var. Jeg valgte et forkert id i starten af scriptet (skulle have valgt wrapper i stedet for indhold).
Der er dog stadig noget der genere mig lidt. På IE, så når man klikker på vis info og scroller ned i bunden af siden, hvorefter man så klikker på skjul info, så er knappen stadig synlig, selv om den burde være skjult.
Koden ser nu sådan her ud:
- // Scroll til toppen Jquery script
-
- $(document).ready(function(){
-
- var topbutton = document.createElement("a");
- topbutton.setAttribute("id", "top_knap");
- document.getElementById("wrapper").appendChild(topbutton);
-
- // skjuler id'et (#top) til den, som sender personen tilbage til toppen af siden
- $(topbutton).hide();
-
- $(topbutton).css({
- "width" : "32px",
- "height" : "32px",
- "background" : "#999 url(billeder/ikoner/pil_op.png) no-repeat",
- "margin-left" : "-55px",
- "border" : "1px #666 solid",
- "position" : "fixed",
- "bottom" : "10px",
- "zoom" : 1,
-
- "border-radius" : "4px",
- "-moz-border-radius" : "4px",
- "-webkit-border-radius" : "4px",
-
- "-ms-filter" : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)",
- "filter" : "alpha(opacity=30)",
- "opacity" : 0.3
- });
-
- $(topbutton).bind("mouseover focus", function() {
- $(topbutton).css({
-
- "-ms-filter" : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",
- "filter" : "alpha(opacity=100)",
- "opacity" : 1,
-
- "cursor" : "pointer"
-
- });
- });
-
- $(topbutton).bind("focusout mouseout", function() {
-
- $(topbutton).css({
-
- "-ms-filter" : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)",
- "filter" : "alpha(opacity=30)",
- "opacity" : 0.3,
-
- });
-
- });
-
- // Fader topbutton ud/ind afhængigt af, hvor meget der er scrollet ned i browseren
- $(window).scroll(function() {
-
- if ($(this).scrollTop() > 100) {
- $(topbutton).fadeIn();
- } else {
- $(topbutton).fadeOut();
- }
-
- });
-
- // Scroller browservinduet til toppen af siden, hvis der klikkes på topbutton
- $(topbutton).on("click", function(e) {
-
- $('body,html').animate({
- scrollTop: 0,
- }, 800);
-
- return false;
-
- });
-
- });