Scrolltop

Hi,
I'm using Metronic 8.1.6. on ASP.NET MVC web app (not Core!). I'm trying to implement scrolltop button on page like in html demo 1, for example: metronic_html_v8.1.6_demo1/demo1/dist/account/overview.html
I'm not able to make the scrolltop button automatically showing at the page bootom in the first place.
All mandatory scripts are included.
Is there any other js to apply? Or js method to call?

Best wishes,
Valentin

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)

Hi Valentin,

If you are using our default bundle files then you can just connect "plugins/global/plugins.bundle.css" and "css/style.bundle.css", and scrolltop button should work.

Make sure that you have data-kt-scrolltop="true" attributes on your scrolltop element.

<div class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
...
</span>
<!--end::Svg Icon-->
</div>

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
I have included "plugins/global/plugins.bundle.css" and "css/style.bundle.css" in _layout.cshtml from the beginning already. Also html is identical to yours, with addition of svg icon of course. Scrolltop html code is included at the end of file outside of div kt_app_content.
Sadly no success.
Also I tried to move scrolltop button inside div kt_app_content, but no success.
Any other idea?

Best Wishes,
Valentin

Hi Valentin,

Sorry, the files were mistaken I meant for scrolltop you should include plugins/global/plugins.bundle.js and js/scripts.bundle.js.

If you have already included those files then make sure that initialization functions are triggered correctly.

For example, in file src/js/components/scrolltop.js function KTScrolltop.init() is triggered on page load.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
I added trigger KTScrolltop.init() on page load, but no succes - button doesn't show at scrolling to the bottom.
Also no errors are reported on page load in console.
Best wishes,
Valentin

Hi Valentin,

Can you try to inpect your scroll top element?

Check the styles of the scrolltop element, we are handling element visibility using body attribute data-kt-scrolltop.

The element will be visible when body has attribute with data-kt-scrolltop with value "on".

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

In documentation is stated that attribute data-kt-scrolltop accepts "true" or "false" values.

This is scrolltop element after scrolling to the bottom and it didn't change from initial state:





...icon data...



Best wishes,
Valentin

Hi Valentin,

On scrolltop element, you should use data-kt-scrolltop with value "true" or "false" as described in our doc, but on body tag value should be different and it should be handled with our js automatically if you have initialized your elements correctly.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
Here is what I learned and did or tried so far:
- mandatory "plugins/global/plugins.bundle.js" and "js/scripts.bundle.js" are included - I checked the page after rendering and the two elements are definitely present.

- scrolltop element/button is present with class "scrolltop" and attribute "data-kt-scrolltop='true'"

- I made breakpoint inside "scripts.bundle.js" at scrolltop section at
"var KTScrolltop = function(element, options) {..."
to see if code is reached and it is definitely reached. Also scrolltop _init is executed.

- body tag should get attribute "data-kt-scrolltop='on'" after page load which it doesn't.

- I then add mentioned attribute in body tag myself and scrolltop button showed, but it doesn't react on click.

Am I missing something else?

Best wishes,
Valentin

Hi Valentin,

If button showed up with data-kt-scrolltop='on' attribute then problem most likely is with your js code, our js functions must be initialized when content is mounted. Make sure that you haven't modified anything in our scrolltop component. You can refer to our Asp.Net Core Starterkit.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
After deep diving into my code I discovered a piece of css code, which is leftover of previous theme i used in application and it was preventing scroll detection on page:
html, body {
overflow-x: hidden;
}

After I removed it scrolltop functionality started working right away.
I am sorry for spending your time, you helped me a lot!

Thank you very much and best wishes,
Valentin

Hi Valentin,

Glad to hear that. All the best with your project!

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(