Smooth Scrolling

13 replies · opened Jan 15, 2022

MMaximM777Jan 15, 2022

Hello! I use Smooth Scrolling with the following code:
page "A" links
[Узнать больше](price.html#yandex)
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=


[ Вернуться назад](123.html#yandex-price)

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"

MMaximM777Jan 16, 2022

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
[ «Яндекс.Директ»](#yandex-price)

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)
`` is displayed on the screen only if you move the smartphone to a horizontal position and then back to vertical.

SSemicolon WebSTAFFJan 17, 2022

Hello,

  1. To fix this, you can simply find and delete the following code in the js/functions.js File:
    [ch_pre type="js"]$body.off( 'click' ).on( 'click', 'a[href*="#"]', function() {
    $window.on('beforeunload', function() {
    $window.scrollTop(0);

    });
    });[/ch_pre]

  2. 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:
    [ch_pre]
    jQuery(window).on( 'lazyLoadLoaded', function() {
    SEMICOLON.widget.linkScroll();
    });
    [/ch_pre]

  3. Simply add the data-mobile="true" Attribute to the #gotoTop Element. Example:
    [ch_pre][/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MMaximM777Jan 17, 2022
  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!

MMaximM777Jan 17, 2022
  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/

SSemicolon WebSTAFFJan 17, 2022

We have checked out your Website and the Services your Website is offering is illegal based on the License you currently have. You cannot resell Canvas in any form without prior permissions and proper licensing. This is strictly prohibited!

MMaximM777Jan 17, 2022

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

MMaximM777Jan 17, 2022

This is just a learning project.

SSemicolon WebSTAFFJan 17, 2022

Apologies but the Content of your Website clearly mentions reselling Canvas Templates for a Fee to your Customers. This is not allowed.

MMaximM777Jan 17, 2022

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

MMaximM777Jan 17, 2022

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

SSemicolon WebSTAFFJan 17, 2022

Thanks so much! :) We really appreciate it.

MMaximM777Jan 17, 2022

Let's be friends!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard