0

i've just changed my Jquery version to 3.1.1 and all of sudden some of my scripts stopped working.

I've already worked out most of them but still cannot resolve the issue with the scroll to anchor script...

Here it is:

$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});

It just won't work now, any idea how to work it out?

Here's the html script part too:

<a class="scrolltomain" href="#content-wrapper">
<span>
<img id="scroller" src="img/scrolldown-1.gif"></img>
<center>Kliknij<br>lub<br>przewiń</center>
</span>
</a>

Would be really grateful if someone could help me.

BTW, chrome console wouldn't show any errors.

Damian Doman
  • 522
  • 8
  • 19

2 Answers2

2
  • There is no such tag as </img>. Image tags are self closing, a la: <img src=" " />

And you need to define the location before the animation. Simply define a variable before the animate()function and then call the variable within the function.

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    var thisRef = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $( thisRef ).offset().top
    }, 500);
});
a { display: block; text-align: center;  height: 400px; }
#content-wrapper { background: red; height: 300px; margin-top: 500px; color: #fff; font-size: 2em; line-height: 1.6; text-align:center; padding: 20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="scrolltomain" href="#content-wrapper"><img id="scroller" src="http://placekitten.com/25/25" /><br />Kliknij<br />lub<br />przewiń</a>
<div id="content-wrapper"> Content </div>
Scott
  • 21,475
  • 8
  • 43
  • 55
  • Actually my script started working after your advice, but i'm still not fully happy with the way it works :P Instead of animating the scroll it just 'jumps' to the div, have tried working it out but still no clue what else am I doing wrong – Damian Doman Jan 11 '17 at 23:36
  • Scott's answer was of much help, in fact it works flawlessly. The problem i had with the animation itself was the `overflow-x: hidden;` style anchored to `body`. It's working perfect now, thanks! – Damian Doman Jan 12 '17 at 00:12
1

try .delegate() instead of .on().... .on() is new to Jquery 1.7 so if you went backwards then you'll need to use delegate or live.

.delegate() vs .on()

Community
  • 1
  • 1
garek007
  • 395
  • 4
  • 15