单击li上的左动画

Question

I have a menu structure:

<ul id="creamenu" class="menuHolder">
                    <li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
                    <li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
                    <li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
                </ul>
                <ul id="mainmenu" class="menuHolder">
                    <li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
                    <li><a id="about2-menu" href="#/haberler">about 2</a></li>
                    <li><a id="about3-menu" href="#/galeri">about 3</a></li>
                    <li><a id="about4-menu" href="#/referanslar">about 4</a></li>
                    <li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>

I have a content structure in same HTML file:

    <div id='news-1'>
        <!-- content -->
        <!-- content -->
</div>

    <div id='news-2'>
        <!-- content -->
        <!-- content -->
</div>

I want, when i click a item eg creamenu item, go to div. EG

click news-1 item, go to news-1 div. Like this: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241

Is it possible it with pure jQuery?

Answer 1

It's absolutely possible. Try this:

$('#creamenu a').click(function(e) {
    var splitId = $(this).attr('id').split('-'),
        contentId = splitId[0] + '-' + splitId[1];

    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('#' + contentId).offset().top
    }, 'slow');
});

Using this specific approach, you will need to ensure that the id of your link in the #creamenu is prefaced with the id of its corresponding content (as you are doing now).

It would also be more robust to just put the id of your content in the href of the #creamenu link. That way, if the user doesn't have JS active, it would still jump to the content, albeit without an animation. For example:

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

Then, your JS would be as follows:

$('#creamenu a').click(function(e) {
    e.preventDefault();

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

Answer 2

Yes, just change your href attributes to the ID of the element:

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

To scroll smoothly, try:

$('a[href^=#]').on('click',function(e) {
  e.preventDefault();
  var id = $(this).attr('href'),
      top = $(id).offset().top;
  $('html,body').animate({'scrollTop':top}, function() {
    window.location = id;
  });
});

Answer 3

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

Answer 4

You can, but you need some minor changes to your code.

$('#creamenu li a').click(function(event){
   event.preventDefault();
   $position = $( $(this).attr('href') ).offset().top;
   $('html, body').animate({scrollTop:$position}, 'fast');
});

And change link structure, so href is and id of an element you would like to scroll to.

You could also make a links looks like this:

<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>

And use rel atribute to find an element, You would like to scroll to:

$('#creamenu li a').click(function(event){
       event.preventDefault();
       $position = $( $(this).attr('rel') ).offset().top;
       $('html, body').animate({scrollTop:$position}, 'fast');
});

And if you are looking for a parallax effect: http://jessandruss.us/ , checkout tutorial here: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/ or here: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/