Background Image

Плавная прокрутка к материалу по клику

Script

by — Category Script on

 

Вариант на jQuery

Разметка ссылки с уже присвоенным классом...

<a href="#services">Services</a>

...куда нужно переместится после нажатия на ссылку:

<div id="services"> <h2>Текст заголовка</h2> Контент </div>

Подключаем jQuery

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Число 900 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды. 

В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также перемещается наверх, но уже не плавно.


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Адаптивный слайдер на весь экран

    Адаптивный слайдер на весь экр...

    Адаптивный слайдер с контентом. Изюминкой данного сл...

    View More
    0 786 17:29
    Скрипт смены текста и фона

    Скрипт смены текста и фона

    Раньше при использовании JavaScript можно было измен...

    View More
    0 560 15:51
    Сколько стоит создать сайт в интернете?

    Сколько стоит создать сайт в и...

    Сколько стоит создать сайт? Вполне насущный вопрос, ...

    View More
    0 773 10:36
    Как сделать сайт визитку самостоятельно?

    Как сделать сайт визитку самос...

    Визитка – самый простой в плане технической ре...

    View More
    0 411 23:22
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu