Geek Answers Handbook

Javascript smoothscroll not working

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

There is a button to navigate down the te page, the action is instantaneous, but smooth scrolling is much nicer.

So, I google around, tried a lot, and the shortest script I found is: But I can't get it to work.

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

Link: 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 checked the example site that was specified and added it in the same way as my html. Link checked: https://css-tricks.com/examples/SmoothPageScroll/ But I can't get it to work.

In addition, I have another script, the witch needs the same action after the video ends. Script for this now:

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

This should do the same; scroll image.

I was hoping I would explain it clearly, if not, I would like to try again. Relationship

An EDIT script is not added to the online site because the script is not working yet, if it makes it easier, I can add it online.

update the site on the network with broken scripts

+7
javascript html
source share
2 answers

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

The smoothed scroll script you found only works for anchor tags ( <a> ).

Since window.location.href = "#section" not an anchor tag, the script will not affect it.

However, you can use the important bits of this script and use it in your videoEnd() function, like this.

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

EDIT:

The reason it doesn't work for you is because you are viewing the page using the file:// protocol and the script source that references jQuery

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

Which uses a relative // scheme, which means the browser will add the current view scheme, turning it into this.

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

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

  http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
+2
source share

This <script> snippet 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 ); } ); } );
0
source share

More articles:


All Articles