Как добавить эффект перехода к ссылке в верхнюю часть страницы? HTML и CSS

Question

У меня есть стрелка внизу моей страницы, которая ссылается на верхнюю часть страницы, и я хочу, чтобы она медленно перемещалась. Я думаю, что это будет добавлено через переход или преобразование.

Answer 1

Гладкая прокрутка - это то, что вы ищете, но это невозможно сделать только с помощью html или css. Вот JQuery скрипт для ее выполнения:

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Теперь просто сделать ваш стрелок-ссылку якоря с чем-то вроде «#top» для HREF значения и добавить идентификатор = «сверху» к элементу в верхней части страницы ,

«1000» в скрипте - миллисекунды во время анимации прокрутки (в этом случае 1 секунда). Отрегулируйте это, если вам нужно больше прокрутки.