Question

I’ve tried searching around but couldn’t find a solution to this.

I am running two main JS functions on a site I am building. One which is lazy load, and one which is a smooth scroll, the latter for an anchor link to the bottom of the page.

However, with them both being present, they conflict each other as you can’t anchor smooth scroll to the bottom of the page with lazyload… it just isn’t happening.

Is there a way to disable lazyload if the user clicks on the anchor link? Thus making it work, and if they don’t, then the lazyload works just fine?

Lazy Load:

<script>
     $("img").lazyload({
         threshold : 10000,
         placeholder : "images/white.gif",       
         effect      : "fadeIn"
     });
        </script>

Smooth scroll (although unfortunately this works for ALL anchor links… grrr):

<script>
        $(document).ready(function() {
          function filterPath(string) {
          return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
          }
          var locationPath = filterPath(location.pathname);
          var scrollElem = scrollableElement('html', 'body');

          $('a[href*=#]').each(function() {
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {
              var $target = $(this.hash), target = this.hash;
              if (target) {
                var targetOffset = $target.offset().top;
                $(this).click(function(event) {
                  event.preventDefault();
                  $(scrollElem).animate({scrollTop: targetOffset}, 1400, function() {
                    location.hash = target;
                  });
                });
              }
            }
          });

          // use the first element that is "scrollable"
          function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
              var el = arguments[i],
                  $scrollElement = $(el);
              if ($scrollElement.scrollTop()> 0) {
                return el;
              } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                  return el;
                }
              }
            }
            return [];
          }

        });
          </script>

Thanks in advance,
R

Answer 1

You could replace the contents of the script with the contents surrounded by comments /* / on click and then re-enable by removing these comments / */. If the script never needs to be used again on the same page you could place the script inside a container element with an id and use jquery to remove that element from the page on click event. Another option that may work would be to alter the javascript to check a ‘flag’ that is toggled upon clicking the anchor link, the ‘flag’ can just be a javascript variable in the page that prevents the scripts you don’t want to run from running.