auto scroll horizontal link jump

Question

I want my link to animate scroll horizontally across the page to the desired "id" rather then jumping to it. this is what I have so far but it doesn't seem to be working.

HTML:

<div class = option1> 
  <a href= #point1> ➟ </a>
</div>

<div id = point1></div>
<!-- id point is not in the "body" of the link? does that matter? -->

CSS:

body {
  min-height:100%;
  height:100%;
  margin:0;
  width:auto;
}

html {
  min-height:100%;
  height:100%;
  overflow-y:hidden;
  width:100% }

JavaScript:

$(document).ready({ 
  $(function() {
    $('ul.nav a').bind('click',function(event){
      var $anchor = $(this);
      $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
      }, 15000);
      event.preventDefault();
    });
  });
});

yea i have tried transition-duration:5s but doesnt do anything — sosro, Jun 30 '16 at 10:31

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

Please try use class="name" not class=name

over wise this looks similar: Smooth scrolling when clicking an anchor link

edited May 23 '17 at 12:16

Community

1
1

answered Jun 30 '16 at 11:36

Grzegorz Miśkiewicz

426
2
14

@sosro: Mark this answer as correct answer if this is the appropriate answer. – Nana Partykar Aug 24 '17 at 15:29

auto scroll horizontal link jump

1 Answers1