Как сделать вертикальное меню с функциею прокрутки к нужному разделу страницы ?

#jquery #html #javascript

Например, как на этом сайте (меню с правой стороны).    

Ответы

Ответ 1

http://jsfiddle.net/Azsv5/
CSS
*{
    padding: 0;
    margin: 0;
}
body{
    font: 14px/20px tahoma;
}
nav {
    background-color: #f9fbfc;
    background-image: -moz-linear-gradient(center top , #fff, #f1f5f7);
    background-repeat: repeat-x;
    border: 1px solid #b6c9d4;
    border-collapse: separate;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    min-height: 40px;
    line-height: 38px;
    margin: 0 0 100px;
    position: fixed; top: 0; right: 0;
    width: 180px;
}
nav ul {
    margin: 0;
}
nav li {    
    font-weight: bold;
    list-style: none outside none;    
}
nav .current a, nav a:active {
    background: none repeat scroll 0 0 #f1f5f7;
    border-collapse: separate;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
}
nav a {
    border-radius: 0;
    border-right: 1px solid #b6c9d4;
    display: block;
    height: 38px;
    margin: 0;
    padding: 0 20px;
    color: #3780aa;
    text-decoration: none;
}
nav a:hover { 
    background: rgba(55, 128, 170, 0.149);
    text-decoration: none;
}

div{
    margin-bottom: 100px;
    padding: 20px 10px 0;
    width: 350px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JavaScript
$(document).ready(function(){
        $('a[href*=#]').bind("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top - 0
    }, 500);
    e.preventDefault();
    });
    return false;
});

HTML

    

      
download
      
examples
   
      
documentation
      
source
    



    
Раздел 1
    



    
Раздел 2
   



    
Раздел 3
    



    
Раздел 4
    



Ответ 2

Если вам не нужна анимация, а только прокрутка до нужного места, то значит, что вы
прогуливали "первые уроки первой четверти по самым основам HTML"
Обновление
Сейчас нет особо времени на создание чего-то более нового, поэтому посмотрите такое
старенькое решение, которое я делал для аналогичной задачи.