Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Up link (DIV) + enkel weergeven als meer dan x-aantal px gescrolled is.

MrWineLovers - 31/01/2011 23:58 (laatste wijziging 01/02/2011 00:01)
Nieuw lid		Wil m.b.v. Javascript graag een link om weer naar het begin van de pagina te gaan. De link wil ik graag in een DIV die zich steeds onderaan de pagina bevind. De DIV mag enkel zichtbaar zijn als x-aantal pixels naar beneden is gescrolled. Zeker niet zichtbaar dus als de pagina korter is dan de hoogte van het browservenster. Iemand een idee hoe dit best te doen (+ voorbeeld). Al een tijdeje gegeoogeled doch niet direct iets gevonden.

4 antwoorden

Gesponsorde links

vinTage - 01/02/2011 00:21
Nieuw lid		je kan een div positioneren adhv viewPort zodat hij in het begin (buiten het linken van ankers) buiten beeld staat. Dan heb je nog een functie nodig die kijkt of je scrollTop groter is dan 0 en dan kan je de style veranderen naar fixed (met juiste settings)

Beirensg - 01/02/2011 10:37
HTML beginner		Zou dit niet werken: html4strict code - Bekijk de code zonder highlighting - Klap code in <body style="height:100%"> blabla <div style="position:absolute;bottom:-55px"> test </div> </body> <body style="height:100%"> blabla <div style="position:absolute;bottom:-55px"> test </div> </body> Nu blijft de div 55px onder de pagina staan.

vinTage - 01/02/2011 14:17 (laatste wijziging 01/02/2011 14:30)
Nieuw lid		maar is altijd in beeld, ook terwijl er geen content is(scrollbar). edit, ohnee, hij staat eronder, maar zal hij daar ook blijven? nope

Beirensg - 01/02/2011 17:13

HTML beginner

Ik begrijp nu pas het probleem.
Indien de pagina minder hoog is dan 100%; moet er nooit een link verschijnen.
Indien de pagina hoger is 100% dan verschijnt er een link als de gebruiker naar beneden scrollt.

Dit zal helpen:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<body>
    blabla<br />
    blabla<br />
   
    <div id="test" style="position:fixed;bottom:55px;right:100px">
        test
    </div>
</body>

<body>
    blabla<br />
    blabla<br />
 
    <div id="test" style="position:fixed;bottom:55px;right:100px">
        test
    </div>
</body>

Met een beetje Jquery

javascript code - Bekijk de code zonder highlighting - Klap code in

                $(window).scroll(function(){
    if ($(window).scrollTop()>0){
      
        $('#test').show();
    }
    else{
        $('#test').hide();
    }
});

$(document).ready(function() {
     $('#test').hide();
});
            
$(window).scroll(function(){
    if ($(window).scrollTop()>0){
 
        $('#test').show();
    }
    else{
        $('#test').hide();
    }
});
 
$(document).ready(function() {
     $('#test').hide();
});
 

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten