How to prevent scroll effect from making my screen flicker on scroll

using chrome and ff so far have made a nasty glitch when using scrollTo function? anyone know how to prevent this from happening? Live Code

HTML

 <ul class="wrapper">
    <li class="listItem"><img src="asset/img/logo.png" ></li>
    <li class="listItem"><a onclick="scrollTo('#container',500);" href="#">Company</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('.flexslider-container',500);" href="#">Service</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#map',500);" href="#">Map</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#footer',500);" href="#">Contact</a></li>
    <li class="listItem">
      <p>250-610-9100</p>
    </li>
  </ul>

SCRIPT

<script type="text/javascript">
function scrollTo(o, s) {
    var d = $(o).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: d
    }, s);
}
</script>

Answers


You should be attaching events via .on(), not shoving code into the onclick attribute.

The (more) proper solution is to give you links a class:

<a href="..." class="menu-link">...</a>

And then some fancy data attributes:

<a href="..." class="menu-link" data-target="#container" data-duration="500">...</a>

And in your code, add this:

$(document).ready(function() {
  $('.menu-link').on('click', function(event) {
    event.preventDefault();  // <---- This is the magic stuff

    scrollTo($(this).data('target'), $(this).data('duration'));
  });
});

Basically, you give your elements special attributes that can be read with jQuery's .data() function. Then, instead of adding a function call to each link, you attach one magic function to all of them.


If you want to keep your current code (ehh), just add return false; at the end of every onclick attribute:

<a onclick="scrollTo('.flexslider-container',300);return false;" href="#">Service</a>

This prevents the default action from occurring (scrolling to the top of the page).

I recommend my first solution. You aren't doing jQuery any justice if you are only using it to a third of its potential.


Use .stop() to clear the animation queue

function scrollTo(o, s) {
        var d = $(o).offset().top;
        $("html:not(:animated),body:not(:animated)").stop().animate({
            scrollTop: d
        }, s);
    }

As talking about anchors you should prevent the default anchor behavior using preventDefault():

$('.wrapper a').on('click', function(e){
    e.preventDefault();
});

Need Your Help

How to put NO LOCK for stored procedure T-SQL for all tables

sql sql-server tsql

I want that my tables will not be locked. Is it possible to set NO LOCK for all tables in the stored procedure. What is the best way if I have a lot of tables like this:

Packaging EJB in JavaEE 6 WAR vs EAR

java-ee java-ee-6 ejb-3.1

Starting a new project and would like to know the pros and cons of packaging EJB in a WAR vs EAR.