Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Jak zrobić przewijanie/odnośnik do wybranego momentu strony w HTML5 ?

HowTo  Założony przez  Cabura.

18.08.2013, 18:40
#1
Szukam tutka w którym będzie opisane jak zrobić:

1.Na stronie głównej posiadam MENU strony a w MENU odnośnik "Imprezy"
2.Po naciśnięciu odnośnika "Imprezy" chce by strona samoczynnie przewinęła się na dól strony (tej samej strony gdzie jest to MENU) do artykułu - Imprezy.

Nie umiem bardziej obrazowo tego wyjaśnić. Nigdzie nie mogę tego znaleźć.
18.08.2013, 18:58
#2
<a rel="nofollow" href='#menu'>link</a> przeniesie Ciebie do id o nazwie menu
18.08.2013, 18:59
#3
Hmm. Spróbuj zaznaczyć ten "obszar" z imprezami w jakiegoś diva typu:
<div id="imprezy">..</div>

Potem w odnośniku takie coś:
<a href="#imprezy">Imprezy!</a>

Potem dodaj sobie jakiś efekt jQuery, ale tutaj już nie pomogę bo się na tym nie znam :P
26.08.2013, 09:31
#4
(18.08.2013, 18:58)stepien napisał(a): <a rel="nofollow" href='#menu'>link</a> przeniesie Ciebie do id o nazwie menu

po co to nofollow?

jquery scrollTo.
Serwery CS REKSIO:))
26.08.2013, 20:15 (Ten post był ostatnio modyfikowany: 27.08.2013, 20:07 przez truskafkowy.)
#5
<a id="nazwa">Imprezy</a>

<a href="#nazwa">Imprezy są fajne.</a>

@EDIT
Nie wiem skąd to name wziąłem.
27.08.2013, 15:15 (Ten post był ostatnio modyfikowany: 27.08.2013, 15:16 przez Riess.)
#6
Wersja efekciarska z płynnym scrollem (która wkurzy część mobilnych userów):

<a href="#sect-lorem" class="smooth">Go to Lorem!</a>

...

<div id="sect-lorem">Lorem ipsum dolor met.</div>

...

<script type="text/javascript">
$(function() {
  $('a.smooth').click(function(){
    $('html, body').animate({
      scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
  });
});
</script>
27.08.2013, 16:55
#7
Strona jest oparta głównie na fotorelacjach. Tym samym mobilnych odrzuciłem na samym początku. Efekt wypróbuje jutro. Za wszelkie wskazówki dziękuje i chętnie poznam kolejne : )



Użytkownicy przeglądający ten wątek:

1 gości