Problem z płynne przewijanie strony

komentarz 29 grudnia 2015 przez Paweł123 Nałogowiec (33,540 p.)

Link, który podałeś nie działa :(

komentarz 29 grudnia 2015 przez Radekoslaw123 Gaduła (3,080 p.)

To dam ci kod

komentarz 29 grudnia 2015 przez Radekoslaw123 Gaduła (3,080 p.)

HTML:

<a href="javascript:void();" onclick="scroll_to('#docelowy_id');">link</a>

JS:

function scroll_to(selector) {
    $('html,body').animate({scrollTop: $(selector).offset().top}, 1000);
    return false;
}

Liczę na naj :D

komentarz 29 grudnia 2015 przez Paweł123 Nałogowiec (33,540 p.)

A masz jakieś poradnik do tego? Bo za bardzo nie wiem co z tym zrobić? Nie umiem JS :(

komentarz 29 grudnia 2015 przez Radekoslaw123 Gaduła (3,080 p.)

Wklejasz to do sekcji head:

<script>
function scroll_to(selector) {
    $('html,body').animate({scrollTop: $(selector).offset().top}, 1000);
    return false;
} 
</script>

Potem wystarczy robić linki wdg. tego szablonu

komentarz 29 grudnia 2015 przez Radekoslaw123 Gaduła (3,080 p.)

I JESZCZE dodajesz też to do sekcji head

Przed tym kodem co podałem wczesniej, to jest ważne.

komentarz 29 grudnia 2015 przez Paweł123 Nałogowiec (33,540 p.)

Ok, dzięki

Jednak nie działa :(

Oto kod html:

<!DOCTYPE html>
<html>
<head>
    
    <title>Catering Zielona góra - Niespodzianka PLUS</title>
    
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="dist/css/lightbox.css">
   
    <script>
function scroll_to(selector) {
    $('html,body').animate({scrollTop: $(selector).offset().top}, 1000);
    return false;
} 
</script>

</head>
<body>
   
    
   
    
    <header>Niespodzianka PLUS</header>
    <nav>
        <ul>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce1');">O nas</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce2);">Oferta</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce3');">Menu</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce4');">Kontakt</a></li>
            <li><a href="javascript:void();" onclick="scroll_to('#przejsce5');">Galeria</a></li>
      </ul>
    </nav>
    
    <div id="zdjecia_lokalu">
    
            <img src="zdjecia_lokalu/image001.png"/>
            <img src="zdjecia_lokalu/image003.png"/>
            <img src="zdjecia_lokalu/image002.png"/>
            <img src="zdjecia_lokalu/image004.png"/>
    </div>
    
    <section>
    
        <article>
            <p2>Szukasz dobrego cateringu na swoje przyjęcie?</p2>
        </article>
          
       
         <img id="napis" src="grafika/napis.png">
        
       <article id="przejsce1">
        
            <p>O nas</p> 
           
            <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis neque at ipsum feugiat faucibus. Donec et sagittis turpis. Vestibulum dictum massa sed enim maximus faucibus. Proin maximus elementum euismod. Nam eget vestibulum ex. Quisque elit lacus, efficitur nec consequat non, finibus in justo. Aliquam auctor auctor magna. Cras varius ornare enim id ornare. Curabitur vulputate nisi in facilisis accumsan. Duis magna justo, suscipit ac iaculis sed, dapibus ultrices mauris.

Suspendisse potenti. Etiam auctor sem massa, eget elementum lacus vehicula vitae. Ut eget volutpat tortor. Phasellus elementum enim lacus, a auctor turpis scelerisque id. Integer non nisi nec nulla auctor vestibulum pellentesque ut ipsum. Maecenas finibus eget diam a venenatis. Mauris ultricies justo nec lorem pharetra, venenatis posuere lorem pretium. Nullam dolor nunc, sagittis sit amet elit non, volutpat consectetur augue. Sed vulputate massa vel imperdiet aliquam. Quisque ut massa consectetur, vulputate ligula id, convallis libero. Suspendisse fringilla placerat aliquet.</p1>
         
        </article>
        
        <img id="zdjecia_przerywniki" src="grafika/IMG_0227.JPG">
        
        <article  id="przejsce2">
        
            <p>Oferta</p>
            <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis neque at ipsum feugiat faucibus. Donec et sagittis turpis. Vestibulum dictum massa sed enim maximus faucibus. Proin maximus elementum euismod. Nam eget vestibulum ex. Quisque elit lacus, efficitur nec consequat non, finibus in justo. Aliquam auctor auctor magna. Cras varius ornare enim id ornare. Curabitur vulputate nisi in facilisis accumsan. Duis magna justo, suscipit ac iaculis sed, dapibus ultrices mauris.

Suspendisse potenti. Etiam auctor sem massa, eget elementum lacus vehicula vitae. Ut eget volutpat tortor. Phasellus elementum enim lacus, a auctor turpis scelerisque id. Integer non nisi nec nulla auctor vestibulum pellentesque ut ipsum. Maecenas finibus eget diam a venenatis. Mauris ultricies justo nec lorem pharetra, venenatis posuere lorem pretium. Nullam dolor nunc, sagittis sit amet elit non, volutpat consectetur augue. Sed vulputate massa vel imperdiet aliquam. Quisque ut massa consectetur, vulputate ligula id, convallis libero. Suspendisse fringilla placerat aliquet.</p1>
        </article>
        
        <img id="zdjecia_przerywniki" src="grafika/IMG_0273.JPG">
        
        <article id="#przejsce3">
            
            <p>Menu</p>
            
            <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis neque at ipsum feugiat faucibus. Donec et sagittis turpis. Vestibulum dictum massa sed enim maximus faucibus. Proin maximus elementum euismod. Nam eget vestibulum ex. Quisque elit lacus, efficitur nec consequat non, finibus in justo. Aliquam auctor auctor magna. Cras varius ornare enim id ornare. Curabitur vulputate nisi in facilisis accumsan. Duis magna justo, suscipit ac iaculis sed, dapibus ultrices mauris.

Suspendisse potenti. Etiam auctor sem massa, eget elementum lacus vehicula vitae. Ut eget volutpat tortor. Phasellus elementum enim lacus, a auctor turpis scelerisque id. Integer non nisi nec nulla auctor vestibulum pellentesque ut ipsum. Maecenas finibus eget diam a venenatis. Mauris ultricies justo nec lorem pharetra, venenatis posuere lorem pretium. Nullam dolor nunc, sagittis sit amet elit non, volutpat consectetur augue. Sed vulputate massa vel imperdiet aliquam. Quisque ut massa consectetur, vulputate ligula id, convallis libero. Suspendisse fringilla placerat aliquet.</p1>
        </article>
        
        <img  id="zdjecia_przerywniki" src="grafika/IMG_0263.JPG">
        
        <article id="przejsce4">
        
            <p>Kontakt</p>
            <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis neque at ipsum feugiat faucibus. Donec et sagittis turpis. Vestibulum dictum massa sed enim maximus faucibus. Proin maximus elementum euismod. Nam eget vestibulum ex. Quisque elit lacus, efficitur nec consequat non, finibus in justo. Aliquam auctor auctor magna. Cras varius ornare enim id ornare. Curabitur vulputate nisi in facilisis accumsan. Duis magna justo, suscipit ac iaculis sed, dapibus ultrices mauris.

Suspendisse potenti. Etiam auctor sem massa, eget elementum lacus vehicula vitae. Ut eget volutpat tortor. Phasellus elementum enim lacus, a auctor turpis scelerisque id. Integer non nisi nec nulla auctor vestibulum pellentesque ut ipsum. Maecenas finibus eget diam a venenatis. Mauris ultricies justo nec lorem pharetra, venenatis posuere lorem pretium. Nullam dolor nunc, sagittis sit amet elit non, volutpat consectetur augue. Sed vulputate massa vel imperdiet aliquam. Quisque ut massa consectetur, vulputate ligula id, convallis libero. Suspendisse fringilla placerat aliquet.</p1>
       
                    
         </article>
        
        <img  id="zdjecia_przerywniki" src="grafika/IMG_0226.JPG">
        
        <article id="przejsce5">
        
            <p>Galeria</p>
          
            
            
            
            
            
            <a id="galeria" href="#">Przejdz do pełnej galerii</a>
        </article>
    
    </section>
    
    <footer>Wszelkie prawa zastrzeżone 2015</footer>
    
</body>
</html>

Wiesz czemu nie działa?