0

I'm creating a site and it looks similar to this site. As you can see in the example that there is an animated arrow that if you press moves you down. This way is a bit sudden so an animated moving down would be cool. I'm more focused on the page moving down in a nice way rather than the animated arrow. Do you know how to get this done in html and css? If this can't be done with html or css than jQuery?

Example: http://www.fhoke.com

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189

1 Answers1

0
<button id="test"> Test<button>

for scrolling to top:

$( "#test" ).click(function() {
     var x = $(window).scrollTop();  
     $(window).scrollTop(x+150);
 });

for down:

$( "#test" ).click(function() {
        scrolled=scrolled-300;
         $("body").animate({
      scrollTop:  scrolled
       });
  });
Dray
  • 887
  • 8
  • 25
  • How do I link this to my html and get it to work? –  Dec 23 '15 at 14:27
  • add the jQuery script in ` – Dray Dec 23 '15 at 14:29
  • I want to be able to click and image that will move the page down. It doesn't work however? –  Dec 24 '15 at 05:38
  • I was able to get it done with this code instead --> $(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; } } }); }); –  Dec 24 '15 at 09:50
  • It would move the page down to another "section" however I wanted to make the section longer and then when the section was longer it would incorrectly scroll down further. –  Dec 24 '15 at 09:51