Question

我有一个菜单结构：

<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>

我在同一个HTML文件中有一个内容结构：

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

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

我想，当我点击一个项目时，例如creamenu项目，去div。 E.G。

点击news-1项目，转到news-1 div。像这样：http://codecanyon.net/item/fancyscroll/full_screen_preview/370241

是否可以使用纯jQuery？

Answer 1

绝对可能。试试这个：

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

使用这种特定方法，您需要确保#creamenu中链接的ID前面带有相应内容的ID（正如您现在所做的那样）。

将内容的ID放在#creamenu链接的href中也会更加健壮。这样，如果用户没有激活JS，它仍会跳转到内容，尽管没有动画。例如：

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

然后，您的JS将如下：

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

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

Answer 2

是的，只需将href属性更改为元素的ID：

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

要顺畅滚动，请尝试：

$('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>

如果id为href，页面就会跳转到目标框。使用scrollTo之类的插件使其滚动平滑。

Answer 4

您可以，但您需要对代码进行一些细微更改。

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

并更改链接结构，因此href是您要滚动到的元素的id和。

您还可以创建如下链接：

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

使用rel atribute查找元素，您想滚动到：

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

如果您正在寻找视差效果：http://jessandruss.us/，请在此结帐教程：http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/或此处：http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

左侧动画点击li

4 个答案: