Forum PHP.pl > [JavaScript][HTML][jQuery]Problem z wtyczką scrollTo

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML][jQuery]Problem z wtyczką scrollTo

lobopol

28.03.2010, 14:17:10

Zrobiłem właśnie prościutką stronę w formie dużego kwadratu podzielonego na 4 mniejsze:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="skrypt.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
  	<div id="left">
		<div id="top-left">
        	<div class="inner">
            	<ul>
                    <li><a href="#top-left">O firmie</a></li>
                    <li><a href="#top-right">Galeria</a></li>
                    <li><a href="#bottom-left">Oferta</a></li>
                    <li><a href="#bottom-right">Kontakt</a></li>
                </ul>	
 
            </div>
        </div>
        <div id="bottom-left">
        	<div class="inner">
                <ul>
                    <li><a href="#top-left">O firmie</a></li>
                    <li><a href="#top-right">Galeria</a></li>
                    <li><a href="#bottom-left">Oferta</a></li>
                    <li><a href="#bottom-right">Kontakt</a></li>
                </ul>	
            </div>
        </div>
	</div>
 
    <div id="right">
    	<div id="top-right">
        	<div class="inner">
                <ul>
                    <li><a href="#top-left">O firmie</a></li>
                    <li><a href="#top-right">Galeria</a></li>
                    <li><a href="#bottom-left">Oferta</a></li>
                    <li><a href="#bottom-right">Kontakt</a></li>
                </ul>	
                <p>asd</p>
            </div>
        </div>
        <div id="bottom-right">
        	<div class="inner">
        	<ul>
                    <li><a href="#top-left">O firmie</a></li>
                    <li><a href="#top-right">Galeria</a></li>
                    <li><a href="#bottom-left">Oferta</a></li>
                    <li><a href="#bottom-right">Kontakt</a></li>
                </ul>	
            </div>
        </div>
    </div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

skrypt.js

[HTML] pobierz, plaintext 
$(document).ready(function (){
	$('.inner a').click(function () {
		$('#container').scrollTo($(this).attr('href'), 800); 
	});
});
[HTML] pobierz, plaintext

W teorii powinno to mi płynnie przesuwać z jednego diva do drugiego, ale niestety tak nie jest (następuje po prostu przeskok) prosiłbym o jakieś sugestie

Problem rozwiązany do usunięcia

erix

29.03.2010, 10:53:54

Bo nie blokujesz otwarcia kotwicy:

[JAVASCRIPT] pobierz, plaintext 
$('.inner a').click(function (e) {
e.preventDefault();
		$('#container').scrollTo($(this).attr('href'), 800); 
	});
[JAVASCRIPT] pobierz, plaintext

edit: dopiero teraz zauważyłem, że rozwiązany; ale przyda się innym.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.