Member Avatar for seularts

I am trying to make the smooth scroll effects with this basic script for this site: http://greaca9.ro/test/index.html

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

The problem is that it doesn't fire up when I click a link ('APASA' right under the video background) to scroll me lower on the page. I found out that the issue comes out from this part of the style.css:

.box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-color:#444444;
}

How can I make it work or change it to a workaround!?

  • 3 Contributors
  • 4 Replies
  • 321 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by panduranga_1
Member Avatar for gentlemedia

Looking at the source of your HTML, I don't see the sections with the ID you want to scroll to.
If you have for example this:

<a href="#featured"><i class="glyphicon glyphicon-list-alt"></i> Despre Mine</a>

Then you should have further down the HTML an element with that ID like so:

<section id="featured">
    <p>Featured content etc.</p>
</section>
Edited by gentlemedia
Member Avatar for gentlemedia

okay... I see now your #clicked anchor and the section with the id #clicked.

Member Avatar for seularts

Yeah I removed the former button. It;s just an inconvenience but other than that I will manage without this eefect for now :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.