Плавная прокрутка окна со смещением целевого положения.

@doomeCK · Регистрация: 04.02.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте. Сделал плавную прокрутку на сайте при помощи плагина "jq.scrollTo-min.js". Теперь изза фиксированной шапки сверху страницы нужно сделать прокрутку не точно до id блока, а с каким-то смещением (высота шапки), иначе она перекрывает заголовок блока. Как это можно сделать? Код прокрутки:

JavaScript
1
2
3
4
5
6
7
8
jQuery(document).ready(function()
{
    jQuery('#menu a').click(function(){
        var str=jQuery(this).attr('href');
            jQuery.scrollTo(str, 500);
        return false;
    });
});

@xoraxax · 18.02.2015, 13:09

там демо есть

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
<li><a title="$(...).scrollTo( 'li:eq(15)', 1000 );" id="options-no" href="#">no options</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {axis:'x'} );//only scroll on this axis (can be x, y, xy or yx)" id="options-axis" href="#">axis</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', {duration:3000} );//another way of calling the plugin" id="options-duration" href="#">duration</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );//specify an easing equation" id="options-easing" href="#">easing</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {margin:true} );//deduct the margin and border from the final position" id="options-margin" href="#">margin</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset:-50} );//add or deduct from the final position" id="options-offset" href="#">offset</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="options-offset-hash" href="#">offset(hash)</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});" id="options-offset-function" href="#">offset(function)</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:0.5} );//add or deduct a fraction of its height/width" id="options-over" href="#">over</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:{top:0.2, left:-0.5} );" id="options-over-hash" href="#">over(hash)</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true} );//scroll one axis, then the other" id="options-queue" href="#">queue</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends" id="options-onAfter" href="#">onAfter</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true, onAfterFirst:function(){ } } );//called aft

@Liatano · 18.02.2015, 20:48

Уверен,что нужно целый плагин подрубать ради скролла к элементу?
Я обычно вот такой самопиской пользуюсь:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function getOffset(elem){//вычисляем положение элемента
  offset=Math.round(elem.offset().top);
  return offset;
}
function scrollTo(elem,delta){//собственно скролл
  $("html:not(:animated),body:not(:animated)").animate({scrollTop: getOffset(elem)-delta}, 800);
  return false;
}
$('.scrollTo').click(function(){//выбираем все 
   var delta=200;//задаем отступ
   var elem=$'#'+$(this).data('id'));//получаем элемент до которого будем скроллить
   scrollTo(elem,delta);
})

HTML5
1
<div class="scrollTo" data-id='idxxx'></div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .