CODEWITHSUNDEEP
javascripthtml
Jim Vercoelen
Jim Vercoelen

Reputation: 1077

Javascript smoothscroll does not work for some reason

Still working on my site: http://i333180.iris.fhict.nl/p2_vc/

There is a button for navigating down the page, the action is instant but smooth scrolling is much nicer.

So, I google around, tried a lot of things and the shortest script I found is this one, but I can't get it working:

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

Ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/

This is how I added to my code between:

<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
    $(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;
          }
        }
      });
    });
    </script>
</head>

Button:

<body>
    <a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a>
</body>

I inspected the example site which was given and added it the same way to my html. Ref inspected link: https://css-tricks.com/examples/SmoothPageScroll/ But I can't make it work..

Also, I have another script, which needs the same action, after the end of a video. Script for that is now:

<script>
    function videoEnded() {
        window.location.href="#section";
    }
</script>

This has to do the same thing; scroll nicely.

I hoped I explained it understandable, if not, I'd like to try it again. Regards

EDIT Script isn't added to the online site because the script isn't working yet, if it would make it easier I could add it online.

Update Site is online with not working scripts...

Upvotes: 6

Views: 723

Answers (2)

clickbait
clickbait

Reputation: 2998

This piece of <script> is much better:

$( document ).ready( function () {
    $( "a[href*='#']" ).on( "click", function( event ) {
        event.preventDefault();
        var href = event.target.href; 
        href = href.slice( href.indexOf( "#" ), href.length );
        $( "body" ).animate( {
           scrollTop: $( href ).get( 0 ).offsetTop
        }, 1000 );
    } );
} );

Upvotes: 1

user4639281
user4639281

Reputation:

The script works on the links on your live copy as intended, so I believe you mean your videoEnd() function.

The smooth scrolling script that you found only works for anchor tags (<a>).

As window.location.href = "#section" is not an anchor tag, it will not be affected by the script.

What you can do however is take the important bits of that script and use it in your videoEnd() function like so.

function videoEnded() {
    $('html,body').animate({
        scrollTop: $("#section").offset().top
    }, 1000);
}

EDIT:

The reason it is not working for you is because you're browsing the page using the file:// protocol and the script source which links to jQuery is 

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Which uses the // relative scheme, which means that the browser will append the current browsing scheme, turning it into this..

file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Which does not exist. If you specify http:// it will work

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Upvotes: 2

Related Questions