Smooth Scrolling

Hello! I use Smooth Scrolling with the following code:
page "A" links
<a href="price.html#yandex" data-scrollto="#yandex" data-offset="100" target="_blank" class="btn btn-outline-light mt-2"><span>Узнать больше</span></a>
to page "B" where should be used Smooth Scrolling to a specific Element ID. On the "B" page, I had to create a button data-scrollto=

<div class="col-sm-12">
<a href="123.html#yandex-price" data-scrollto="#yandex-price" data-offset="20" class="btn button-rounded bg-color text-white shadow-sm fw-medium m-0 w-100" data-easing="easeInOutExpo" data-speed="1250" style="padding: 10px 22px"><i class="icon-line-arrow-left" style="position: relative; top: 1px; margin-right: 5px;"></i> Вернуться назад</a>
</div>

because Smooth Scrolling does not work without it (probably it should be, nothing is said about this in the documentation https://docs.semicolonweb.com/docs/ page-elements/useful-snippets/)

I faced the following problem. When I go from page "A" to page "B", a block with id="yandex" on page "B" is immediately displayed, then there is a transition to the header, and only then Smooth Scrolling triggered to id="yandex".

When I go from page "B" to page "A", I am thrown into the header of page "B" and only then go to page "A"

Good day! Yesterday I noticed another issue with Smooth Scrolling on the smartphone.
When there is Lazy Loading on the page, Smooth Scrolling does not reach the required Element ID and stops at the wrong block.
However this code works as it should and takes me to the right Element ID
<a href="#yandex-price" class="btn button-rounded bg-info text-white shadow-sm fw-medium m-0 w-100" data-easing="easeInOutExpo" data-speed="1250" style="padding: 10px 22px"><i class="icon-yandex" style="position: relative; top: 1px; margin-right: 5px;"></i> &#171;Яндекс.Директ&#187;</a>

In order for Smooth Scrolling to work as it should, I had to remove all Lazy Loading before the desired Element ID

Such a problem occurs only on the smartphone itself, no emulator displays this problem.

Cherry on the cake)
<div id="gotoTop" class="icon-angle-up"></div> is displayed on the screen only if you move the smartphone to a horizontal position and then back to vertical.

1. Simply add the data-mobile="true" Attribute to the #gotoTop Element. Example:

<div id="gotoTop" class="icon-angle-up" data-mobile="true"></div>
This will definitely work fine. Hope this Helps!

For this I am very grateful to you!

1. To fix this, you can simply find and delete the following code in the js/functions.js File:

$body.off( 'click' ).on( 'click', 'a[href*="#"]', function() {
$window.on('beforeunload', function() {
$window.scrollTop(0);
});
});;

1. Make sure that the data-scrollto Attribute is properly added on the Scroll-To Link. Then you can use the following code at the bottom of the Page just after the js/functions.js JS File Linking:

<script>
jQuery(window).on( 'lazyLoadLoaded', function() {
SEMICOLON.widget.linkScroll();
});
</script>

Unfortunately, this did not give the desired result.
https://goodhtml.site/

Here is a video of data-scrollto issue on mobile
https://youtu.be/SwKbuWOrKOs

scrollTop + data-scrollto code
https://youtu.be/QyY6cFJzXoY

There was a misunderstanding. I'm learning html/css at school, I can delete the project if you request it.

This is just a learning project.

I will delete all this information right now!
I apologize for the situation!

I have edited all the information on the site. Will this close the problem?

Let's be friends!