Стрелка наверх с памятью (такая же как вконтакте и на хабре)

Стрелочка возвращает в то место страницы, где был пользователь до скролла.

Сама долго искала скрипт, но идеальный не нашла - пришлось делать самой.

Итак, html:

<div class="top-link d-none align-items-center justify-content-center">
<span></span>
</div>

Что означают классы. Все логично, но вдруг кто не знает:

d-none = display: none

align-items-center = align-items: center;

justify-content-center = justify-content: center

Зададим немного оформления с помощью css:

<style>
.top-link {
width: 60px;
height: 60px;
display: none;
align-items: center;
justify-content: center;
position: fixed;
right: 40px;
bottom: 40px;
background: var(--grey-color);
z-index: 999;
cursor: pointer;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.top-link span{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid red;
}

.scroll-top.bottom_button span {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.scroll-top span {
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
fill: var(--white-color);
}
</style>

Класс "bottom_button" меняет направление стрелки. Как раз, когда нужно вернуться в место , где был пользователь появляется этот класс.

И, наконец, скрипт:

jQuery(document).ready(function () {
var topLink = $('.top-link');
var content_position = jQuery(window).scrollTop();

$(window).scroll(function() {
if($(window).scrollTop() >= 250) {
topLink.fadeIn(300).css("display", "flex").children('span').parent().removeClass('bottom_button').addClass('top_button');
} else {
topLink.children('span').parent().removeClass('top_button').addClass('bottom_button');
}
});
topLink.click(function(e) {
if($(this).hasClass('bottom_button')){
jQuery("html,body").animate({scrollTop:content_position},500);
} else{ content_position = jQuery(window).scrollTop();
jQuery("html,body").animate({scrollTop:0},500);
}
return false;
});
});

В скрипте 2 класса "top_button" и "bottom_button" - именно они и определяют поведение стрелки на странице.

Надеюсь была полезна!