Diskuze: šipka nahoru v java scriptu

JavaScript JavaScript šipka nahoru v java scriptu

Avatar
martinstejskal15:

Sháním script, který mi bude automaticky přidávat na web ikonu s šipkou nahoru, a na kterou se potom klikne a celá stránka pojede až nahoru. Našel jsem si nějakej vzor ale je to přes css

.sipka a img {
position: fixed;
right: 30px;
bottom: 60px;
display:block;
}

<a name="top">

<div class="sipka">
<img src="/novy/top.png" alt="">
</div>

jenže se mi to tam objevuje furt, ale chtěl bych to aby se to udělalo samo, když se sjede dolů, tak aby to tam pak přidalo tu šipku

 
Odpovědět  -1 28.9.2014 20:03
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na martinstejskal15
Honza Bittner:

Nejdříve se nauč HTML, CSS a poté se nauč JS - případně knihovnu jQuery.

K čemu ti bude splácaný kód, když nevíš co co znamená?

Nahoru Odpovědět  ±0 28.9.2014 20:11
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Lako
Člen
Avatar
Odpovídá na martinstejskal15
Lako:

V jquery je funkce scroll, kterou detekuješ kdy se k nějakému elementu doscrolluje..
http://www.w3schools.com/…t_scroll.asp
potom na tu tvojí šiplu zavoláš show(). (místo toho přičítání jedniček jako je v návodu)

upozorňuji, že jsou to jquery funkce.
Pokud jquery neznáš, tak to poznej - stojí to za to.

 
Nahoru Odpovědět 28.9.2014 20:27
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na martinstejskal15
vajkuba1234:

Toto je JAVA sekce, ne Javascript...

Nahoru Odpovědět  +1 28.9.2014 21:01
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Odpovídá na Lako
martinstejskal15:

a pod jakým názvem to mám hledat, že by jsem si to udělal podle toho, do google jsem zadal jquery scroll div

 
Nahoru Odpovědět 29.9.2014 8:46
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

//Vlákno jsem přesunul do sekce s Javascriptem.

Nahoru Odpovědět  +1 29.9.2014 9:03
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na martinstejskal15
Honza Bittner:

Zkoušel jsi někdy číst nějaký článek o JS/jQuery, nebo chceš po nás, abychom ti napsali řešení za tebe? -_-

I na této stránce jsou články, pomocí kterých by jsi svůj problém vyřešil a nemusel jsi zakládat toto zbytečné vlákno. Přečti si je, prosím.

Nahoru Odpovědět  +1 29.9.2014 9:05
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na martinstejskal15
tomasmanhal:
aside{
  position: fixed;
  bottom: 10%;
  right:1%;
}
<aside>
<a href="#start" class="goto"><img src="images/sipka.png" height="30" alt="Nahoru" title="nahoru"></a>
</aside>
$(function(){
        $('a.goto').on('click', function(e){
          var odkaz = $(this).attr('href');
          var rychlost = 500;
          var efekt = "easeInOutExpo";
          $("html, body").stop().animate(
           { scrollTop: ($(odkaz).offset().top) },
           rychlost );

          e.preventDefault();
        });

});

Snad ti napoví příklad z mého portfolia ;-)

Editováno 29.9.2014 10:58
Nahoru Odpovědět 29.9.2014 10:56
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Mardzis
Člen
Avatar
Mardzis:
function scrolltop() {

                    var offset = 220;
                    var duration = 500;

                    jQuery(window).scroll(function() {
                        if (jQuery(this).scrollTop() > offset) {
                            jQuery('#back-to-top').fadeIn(duration);
                        } else {
                            jQuery('#back-to-top').fadeOut(duration);
                        }
                    });

                    jQuery('#back-to-top').click(function(event) {
                        event.preventDefault();
                        jQuery('html, body').animate({scrollTop: 0}, duration);
                        return false;
                    });
                }
Editováno 4.12.2014 16:06
 
Nahoru Odpovědět 4.12.2014 16:05
Avatar
Odpovídá na Mardzis
martinstejskal15:

mohl bys to rozepsat podrobněji, kam se co má dát do kódů, použil jsem už dávno ten příklad nad tvým příspěvkem, ale jestli tento kód umí že se zobrazí nějaká ikona po sjetí dolů

 
Nahoru Odpovědět 4.12.2014 17:08
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na martinstejskal15
Samuel Illo :

Ty asi nerozumieš JavaScriptu že? :D lebo ak hej tak stráviť tento kód musí byť hračka ;)

Nahoru Odpovědět 4.12.2014 17:12
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Mardzis
Člen
Avatar
Mardzis:

Máš funkci

scrolltop();

kterou stačí kdekoliv v scriptu zavolat. A místo

#back-to-top

můžeš dát jakýkoliv vlastní div na který se bude klikat aby stránka jela nahoru

Offset je hodnota kdy se má šipka zobrazit a duration zase jak rychle má stránka vyjet nahoru

var offset = 220;
var duration = 500;
Editováno 4.12.2014 17:18
 
Nahoru Odpovědět 4.12.2014 17:17
Avatar
Odpovídá na martinstejskal15
Lukáš Tesař:

Nejdřív se v klidu nauč HTML a CSS, pak javascript a jQuery, pak se koukni sem a pokud ti pořád něco nebude jasné, pak se teprve ptej. Rozumněno?

Editováno 4.12.2014 21:29
 
Nahoru Odpovědět 4.12.2014 21:25
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.