One script preventing second script from working

Question

I have two scripts on a page, but scroll.js prevents main.js from working. I am no script expert so no idea what i need to change/add in order for them both to work.

ANY help is appreciated.

They appear on the page like so:

<script src="assets/js/scroll.js"></script>
<script src="assets/js/main.js"></script>

scroll.js consists of:

$(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;
      }
    }
  });
});

main.js consists of:

(function($) {

skel
    .breakpoints({
        xlarge: '(max-width: 1680px)',
        large: '(max-width: 1280px)',
        medium: '(max-width: 980px)',
        small: '(max-width: 736px)',
        xsmall: '(max-width: 480px)'
    });

$(function() {

    var $window = $(window),
        $body = $('body');

    // Disable animations/transitions until the page has loaded.
        $body.addClass('is-loading');

        $window.on('load', function() {
            window.setTimeout(function() {
                $body.removeClass('is-loading');
            }, 100);
        });

    // Fix: Placeholder polyfill.
        $('form').placeholder();

    // Prioritize "important" elements on medium.
        skel.on('+medium -medium', function() {
            $.prioritize(
                '.important\\28 medium\\29',
                skel.breakpoint('medium').active
            );
        });

    // Nav.
        $('#nav')
            .append('<a href="#nav" class="close"></a>')
            .appendTo($body)
            .panel({
                delay: 500,
                hideOnClick: true,
                hideOnSwipe: true,
                resetScroll: true,
                resetForms: true,
                side: 'right'
            });

});

})(jQuery);

Please note that there are a further two scripts above those two being referenced: skel.min.js and util.js.

scroll.js just allows a smooth scroll down to page anchors. main.js allows a popout menu to appear.

On their own the features of each work, however scroll.js prevents the menu in main.js working.

I don't necessarily have to use that exact scrolling script, just want something that will work together with main.js.

C'mon man, At least tell us what error that you are seeing in your console? And what is the problem by the way. — Rajaprabhu Aravindasamy, Oct 21 '15 at 09:16
All else being equal, the second script isn't going to work because `skel` isn't defined, and the first script isn't going to have any impact on that. — Quentin, Oct 21 '15 at 09:38

score 0 · Answer 1 · answered Oct 21 '15 at 09:45

replace your script "scroll.js" with this:

$(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;
      }
    //}
  });
});

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

I had taken the smooth scrolling script from this page: Smooth scrolling when clicking an anchor link

However i updated my scroll.js to the second answer posted there, being:

 $('a[href*=#]').on('click', function(event){     
     event.preventDefault();
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 });

which works with my main.js script.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 21 '15 at 11:09

ZEDG

21
6

One script preventing second script from working

2 Answers2