Diskuze: šipka nahoru v java scriptu

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

martinstejskal15

Člen

martinstejskal15:28.9.2014 20:03

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;
}

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

28.9.2014 20:03

Honza Bittner

Tvůrce

Honza Bittner:28.9.2014 20:11

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

28.9.2014 20:11

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Lako

Člen

Lako:28.9.2014 20:27

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

vajkuba1234

Člen

vajkuba1234:28.9.2014 21:01

Toto je JAVA sekce, ne Javascript...

Nahoru Odpovědět

28.9.2014 21:01

No hope, no future, JUST WAR!

martinstejskal15

Člen

martinstejskal15:29.9.2014 8:46

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

Honza Bittner

Tvůrce

Honza Bittner:29.9.2014 9:03

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

Nahoru Odpovědět

29.9.2014 9:03

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:29.9.2014 9:05

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

29.9.2014 9:05

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Tomáš Maňhal

Člen

Tomáš Maňhal:29.9.2014 10:56

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

Mardzis

Člen

Mardzis:4.12.2014 16:05

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

martinstejskal15

Člen

martinstejskal15:4.12.2014 17:08

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:4.12.2014 17:12

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

Nahoru Odpovědět

4.12.2014 17:12

Neaktivní uživatelský účet

Mardzis

Člen

Mardzis:4.12.2014 17:17

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

Neaktivní uživatel

Člen

Neaktivní uživatel:4.12.2014 21:25

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

Neaktivní uživatelský účet

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.