2

我有一个菜单结构：

<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。例如

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

纯jQuery可以吗？

4

4 回答 4

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');
});
于 2013-01-18T15:07:55.133 回答
0

是的，只需将您的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;
  });
});
于 2013-01-18T15:00:51.643 回答
0 
<li><a id="news-1-menu" href="#news-1">news 1</a></li>

使用 id 作为 href 页面只是跳转到目标框。使用像scrollTo这样的插件来使其滚动流畅。

于 2013-01-18T15:01:24.310 回答
0

你可以，但你需要对你的代码做一些小的改动。

$('#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 属性查找元素，您想滚动到：

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

于 2013-01-18T15:02:28.733 回答