• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Automatyczne przewijanie strony - link do innej podstrony

VPS Starter Arubacloud
0 głosów
1,499 wizyt
pytanie zadane 25 czerwca 2017 w JavaScript przez Rafik Obywatel (1,870 p.)

Witam!

Chciałbym zastosować efekt taki jak na  filmiku 

(Kurs HTML odc. 4: Listy, automatyczne przewijanie strony) https://www.youtube.com/watch?v=-5Tn5CYPT5k

Ale potrzebuję zrobić efekt, że jak kliknę w dane łączę to jak będę na tej podstronie to mi zjedzie na dół ( to działa) jak również jeżeli będę na innej podstronie to kliknięcie w łączę spowoduje przejście na daną podstronę, a następnie zjechanie na dany fragment strony. 

Korzystam z kodu który jest na powyższym filmie, próbowałem go przerobić w ten sposób:

<div class="menu"  key="oferty"><a id="link1" href="index.php#" class="menulinki">Oferty</a></div>

a w script:

<script>

	jQuery(function($)
	
	{
	
		$.scrollTo(0);
		
		$('#link1').click(function() { $.scrollTo($('#content'), 500); });
	}
	
	);

</script>

Działa tylko jak jestem na index.php jak wejdę na inną podstronę i kliknę w link to przenosi mnie na index.php ale nie zjeżdża w dół.

2 odpowiedzi

0 głosów
odpowiedź 25 czerwca 2017 przez Alterwar Dyskutant (7,650 p.)
wybrane 30 czerwca 2017 przez Rafik
 
Najlepsza

Cześć, żeby scroll działał Ci po tym jak przeniesie Cię na inną podstronę musisz użyć ciasteczek, do zapamiętania pozycji do której ma przewinąć po przejściu na podstronę.

/** slide after reload **/
$(document).ready(function () {
    // Read the cookie and if it's defined scroll to id
    var scroll = $.cookie('scroll');
    if(scroll){
        scrollToID(scroll, 1000);
        $.removeCookie('scroll');
    }

    // Handle event onclick, setting the cookie when the href != #
    $('.nav a').click(function (e) {
        e.preventDefault();
        var id = $(this).data('id');
        var href = $(this).attr('href');
        if(href === '#'){
            scrollToID(id, 1000);
        }else{
            $.cookie('scroll', id);
            window.location.href = href;
        }
    });

    // scrollToID function
    function scrollToID(id, speed) {
        var offSet = 70;
        var obj = $('#' + id);
        if(obj.length){
          var offs = obj.offset();
          var targetOffset = offs.top - offSet;
          $('html,body').animate({ scrollTop: targetOffset }, speed);
        }
    }

W linku dodajesz sobie atrybut data-id. Np. <a href="about.php" data-id="about"></a>  Następnie na takiej podstronie dodajesz sobie id do którego ma Cie przenieść czyli np. <section id="about">.

Po kliknięciu w link, przekierowuje Cię na podstronę i zjeżdża do docelowego id odnoszącego się do data-id

komentarz 25 czerwca 2017 przez Rafik Obywatel (1,870 p.)

Zrobiłem to tak:

link:

<div class="menu"  key="oferty"><a href="index.php" data-id="about" class="menulinki">Oferty</a></div>

W miejscu na stronie dodałem  <section id="about"></section>

Czy w kodzie JS który wkleiłeś powyżej również powinienem coś pozmieniać ? Próbowałem dodać nazwę "about" zamiast 'scroll' ale nie działało wciąż. 

To moje początki z JS więc jeszcze się trochę gubię.

 

komentarz 25 czerwca 2017 przez Alterwar Dyskutant (7,650 p.)

Tak, powinieneś zmienić to  $('.nav a').click(function (e) {

na  $('.menu a').click(function (e) {

bo łapiesz klase .menu w której jest znacznik "a" i gdy go klikasz to wywołuje się funkcja.

Oczywiście powinieneś mieć załączony scirpt z jquery

komentarz 25 czerwca 2017 przez Rafik Obywatel (1,870 p.)

Mam tak i nadal nie działa:

$(document).ready(function () {
    // Read the cookie and if it's defined scroll to id
    var scroll = $.cookie('scroll');
    if(scroll){
        scrollToID(scroll, 1000);
        $.removeCookie('scroll');
    }
 
    // Handle event onclick, setting the cookie when the href != #
    $('.menu a').click(function (e) {
        e.preventDefault();
        var id = $(this).data('id');
        var href = $(this).attr('href');
        if(href === '#'){
            scrollToID(id, 1000);
        }else{
            $.cookie('scroll', id);
            window.location.href = href;
        }
    });
 
    // scrollToID function
    function scrollToID(id, speed) {
        var offSet = 70;
        var obj = $('#' + id);
        if(obj.length){
          var offs = obj.offset();
          var targetOffset = offs.top - offSet;
          $('html,body').animate({ scrollTop: targetOffset }, speed);
        }
    }

 

Script pod jQuery załączone są 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>

 

komentarz 26 czerwca 2017 przez Alterwar Dyskutant (7,650 p.)
Czy w konsoli dostajesz jakiś błąd?

Czy ten skrypt wrzuciłem pod jQuery?
komentarz 26 czerwca 2017 przez Rafik Obywatel (1,870 p.)
edycja 26 czerwca 2017 przez Rafik
Nie, nie ma błędu w konsoli. Tak skrypt jest pod jQuery. Po kliknięciu w link przechodzi jedynie na strone ale nie zjeżdża na dany obszar
komentarz 27 czerwca 2017 przez Alterwar Dyskutant (7,650 p.)
edycja 27 czerwca 2017 przez Alterwar

Widzę, że masz chyba niezamkniętą funkcję. Dorzuć to za ostanią klamrę-->    });

Masz tu działający przykład: http://plnkr.co/edit/WtEEzZoXBxABZVHj0MF4?p=preview
Porównaj ze swoim, i sprawdź. Przykład działa, więc jeśli zrobisz wg. niego powinno śmigać, jak nie dasz rady wrzuć na hosting stronę będzie łatwiej szukać rozwiązania.


Jak robisz nawigacje czy linki to służy do tego lista jak w przykładzie. Jeśli jest to nawigacja to dobrze jeszcze zrobić ją w znaczniku <nav>.

Przykład:

<nav>
   <ul>
      <li>
          <a href="index.php">Home</a>
      </li>
       <li>
          <a href="about.php">About</a>
      </li>
       <li>
          <a href="contact.php">Contact</a>
      </li>
    </ul>
</nav>

 

komentarz 27 czerwca 2017 przez Rafik Obywatel (1,870 p.)
edycja 27 czerwca 2017 przez Rafik

jak dodałem te 2 linijki do head to działa:

<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@2.1.4"></script>
<script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>

Dzięki!

komentarz 27 czerwca 2017 przez Alterwar Dyskutant (7,650 p.)
Skrypty najlepiej umieszczaj przed zamknięciem body. ;)
0 głosów
odpowiedź 30 czerwca 2017 przez foremek Nowicjusz (140 p.)
Cześć, borykam się z tym samym problemem, ale po przestudiowaniu powyższych informacji mój kod nadal nie działa prawidłowo. Co więcej kod ten nie działa w moich przeglądarkach (zarówno w chromie, ff i ie) nawet na przykładach ściągniętych bezpośrednio z plunckera (pomimo iż w podglądzie plunckera działa bez zarzutu. Mam najnowszą wersje firefoxa i chroma, ie nie aktualizowałem ale szczerze wątpie, żeby to akurat coś dało.

 

Czy ktoś wie co może być przyczyną niepowodzeń?

@Rafik wysłałbyś mi pliki z działającym kodem, żebym mógł zobaczyć czy zadziała u mnie bez problemu?

Pozdrawiam.
komentarz 30 czerwca 2017 przez foremek Nowicjusz (140 p.)
Okazało się, że wystarczyło włączyć xampp :)

Podobne pytania

0 głosów
1 odpowiedź 288 wizyt
0 głosów
2 odpowiedzi 3,492 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...