Задать вопрос

Как сделать плавный скролл (смягчение скролла) на сайте?

Добрый день, необходимо осуществить плавный скроллинг (пример по ссылке). Внимание! Это не прокрутка до якоря, а именно смягчение скролла.
Может код у кого завалялся, кто делал.
  • Вопрос задан
  • 119779 просмотров
Подписаться 43 Оценить Комментировать
Решения вопроса 2
jQuery
$(document).bind( 'mousewheel', function (e) { 
    var nt = $(document.body).scrollTop()-(e.deltaY*e.deltaFactor*100); 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(document.body).stop().animate( { 
         scrollTop : nt 
     } , 500 , 'easeInOutCubic' );  
} )

C длиной скрола (100), скоростью (500) и эфектом (easeInOutCubic) нужно поиграться
Ответ написан
@mrcoolvip1
Плавный скролл можно сделать с помощью плагина JQuery Custom Content scroller.
manos.malihu.gr/repository/custom-scrollbar/demo/e...
просто применить его не к отдельному блоку, а к body или html.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
@VjikVjik
jquery.smoothscroll

https://github.com/cferdinandi/smooth-scroll

ссылка на js файл, сохраните его и прикрутите к сайту, на сайте и пример
Ответ написан
BedwaRe
@BedwaRe
Пиши код
Вы просто попопробуйте вот это, я уверен Вам понравится и для сглаживания скрола Вы больше ничего использовать не будете.
Ответ написан
@alexandrpopovweb
Искал то же плавный скролл для AngularJS не нашел, в общем вот кому надо :)
app.factory('goTo', ['$window', '$interval', '$location', '$anchorScroll', function($window: any, $interval: any, $location: any, $anchorScroll: any) {
    return function(id: string, marginTop?: number, step?: number, seconds?: number): void {
        marginTop = marginTop || 100;
        step = step || 300;
        seconds = seconds || 50;
        var element: any = $window.document.getElementById(id);
        if (null === element) {
            return;
        }
        $location.hash(id);
        var position: number = element.getBoundingClientRect().top,
            before: number = 0,
            current: number = $window.scrollY;
        if (current > position) {
            position += current;
            var go = $interval(function(): void {
                $window.scrollTo(0, current);
                before = current;
                current -= step;
                if (position >= current || before === current) {
                    $anchorScroll();
                    $window.scrollTo(0, $window.scrollY - marginTop);
                    $interval.cancel(go);
                }
            }, seconds);
        } else {
            var go = $interval(function(): void {
                $window.scrollTo(0, current);
                before = current;
                current += step;
                if (position <= current || before === current) {
                    $anchorScroll();
                    $window.scrollTo(0, $window.scrollY - marginTop);
                    $interval.cancel(go);
                }
            }, seconds);
        }
    };
}]);


Удалите только все ":string :any: number : void" - Это для TypeScript у кого чистый JS + Angular должно работать :)

И да, два слова о var seconds: number = 50, step: number = 300, marginTop: number = 100;

seconds - по времени "шагать" (в миллисекундах)
step - щаг (в px)
marginTop - как только цель достигнута отступ сверху, полезная штука если есть (например) топ бар fixed. :)

Штака самописная, уже обкатал :)
Ответ написан
Комментировать
@AlexLF
Плавная прокрутка через css:
scroll-behavior: smooth;
Ответ написан
@JAMLIGHT
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    <script>
    (function($){
        $(window).on("load",function(){
            $("html").mCustomScrollbar();
        });
    })(jQuery);
</script>
Ответ написан
it_proger29
@it_proger29
Битрикс
$(function(){
    $("[name^='#']").click(function(){
            var _href = $(this).attr("name");
            $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
            return false;
    });
});

Здесь не требуется ссылка, id блока прописывается в атрибуте name. Не важно в каком теге.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 дек. 2024, в 14:07
15000 руб./за проект
22 дек. 2024, в 13:01
50000 руб./за проект
22 дек. 2024, в 10:44
15000 руб./за проект