3

I have a problem with scroll function on my website www.ecolee.com.

I have a button, which should scroll to specific ID on my page, but button does not work.

I checked my code few times, but it looks like everything is ok and still not working.

My button code is following:

<div class="home-description"><a class="buttons button2" title="Ecolee search engine details" href="#scroll">▼</a></div>

My div ID code is following:

<div class="home-description" id="scroll"> <a title="Ecolee donating and charity search engine"> <H1>How Ecolee charity and donating search engine works?</H1></a></div>

My css:

html {scroll-behavior: smooth;}
sɐunıɔןɐqɐp
  • 3,332
  • 15
  • 36
  • 40
Ondrej Pallo
  • 31
  • 1
  • 3
  • If you look in the console of the browser's Developer Tools (press F12) you will see that jquery is not defined. Please see [Load jquery asynchronously before other scripts](https://stackoverflow.com/questions/14811471/load-jquery-asynchronously-before-other-scripts). – Andrew Morton Aug 10 '20 at 10:41

2 Answers2

1

I guess you could try using something like this in your js.

document.getElementById("scroll").scrollIntoView({behavior: 'smooth'});
Levi Tamiozzo
  • 11
  • 2
0

The scroll-behavior CSS is actually working. That's not what the issue is. I've tested this through dev tools and can confirm it's all good.

One issue your website is having is that jQuery is not defined. This could be breaking other functionality on the website e.g. flexImages needs jQuery as a dependency.

What are you using to for the page preloader. Whatever is handling the page loads seems to be hijacking all href's, so the expected behavior of the anchor link is breaking, as it is trying to load a new page rather than scroll to the anchor.

Would need to understand some of the underlying tech to properly diagnose the issue, but I think it looks to be something to do with the page preloader. The Info link at the bottom of the page, rather than just being a plain link, seems to do the following:

  • User clicks on link
  • Javascript prevents the default action (going to the href)
  • Javascript initiates the preloader action
  • Javascript does a push to whatever the href of the link is

So whenever using an anchor link, the same process breaks when trying to find the href of #scroll because that isn't a valid URL, and history.push will not work on it.

Edit

A simple solution to this might be to only call the preloader function on links with a particular ID, rather than all tags. This would allow anchor links to continue with default behavior, and still enable the preloader on anything else.

Kris
  • 13
  • 5