MYSQL
PHP
HTML
CSS
JS

Плавная прокрутка страницы (scroll). jQuery

Для любых плавных действий в jQuery используется функция 

animate

. Но для того, чтобы плавно проскроллить страницу до определённого элемента сначала нужно узнать его расположение. Это делается с помощью 

.offset().top

.

Пример

 использования этих несложный функций можно увидеть ниже:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
   // В случае, если мы знаем какие будут якоря:
    $(document).ready(function(){
        $("#anchor-link-1").on("click", function(){
            var scroll=$("#anchor-1").offset().top;
            $('html, body').animate({scrollTop: scroll}, 1100);
        });
        $("#anchor-link-2").on("click", function(){
            var scroll=$("#anchor-2").offset().top;
            $('html, body').animate({scrollTop: scroll}, 1100);
        });
        $("#anchor-link-3").on("click", function(){
            var scroll=$("#anchor-3").offset().top;
            $('html, body').animate({scrollTop: scroll}, 1100);
        });
        $("#anchor-link-4").on("click", function(){
            var scroll=$("#anchor-4").offset().top;
            $('html, body').animate({scrollTop: scroll}, 1100);
        });
    });
</script>
<style>
    div.anchor{
        width:600px;
        height:150px;
        border:1px solid #aaa;
        margin:20px;
        padding:20px;
    }
    span.anchor{
        color:#35c;
        text-decoration: underline;
        cursor:pointer;
    }
</style>
  
<div id="anchor-1" class="anchor">1 блок</div>
<div id="anchor-2" class="anchor">2 блок</div>
<div id="anchor-3" class="anchor">3 блок</div>
<div id="anchor-4" class="anchor">4 блок</div>
  
<span id="anchor-link-1"  class="anchor">Переместиться к 1 блоку</span>
<span id="anchor-link-2"  class="anchor">Переместиться к 2 блоку</span>
<span id="anchor-link-3"  class="anchor">Переместиться к 3 блоку</span>
<span id="anchor-link-4"  class="anchor">Переместиться к 4 блоку</span>
1 блок
2 блок
3 блок
4 блок
Переместиться к 1 блоку Переместиться к 2 блоку Переместиться к 3 блоку Переместиться к 4 блоку
Более универсальная плавная прокрутка к якорю #:
?
1
2
3
4
5
6
7
8
9
10
11
<script>
$("body").on('click', '[href*="#"]', function(e){
  e.preventDefault();
  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
</script>
 
<a href="#anchor-1">Переместиться ссылкой к 1 блоку</a>
<a href="#anchor-2">Переместиться ссылкой к 2 блоку</a>
<a href="#anchor-3">Переместиться ссылкой к 3 блоку</a>
<a href="#anchor-4">Переместиться ссылкой к 4 блоку</a>
Переместиться ссылкой к 1 блоку Переместиться ссылкой к 2 блоку Переместиться ссылкой к 3 блоку Переместиться ссылкой к 4 блоку
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Наследование с помощью prototype Классы в JS 2D игра на JS. Canvas, поворот изображения. Вывод JS массива как в PHP. print_r Javascript Paint с использованием Canvas
↑