上点击左立动画

我有一个菜单结构：上点击左立动画

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

来源

2013-01-18 Dokuz Tane On

这绝对有可能。试试这个：

$('#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-18 15:07:55 robmisio

是的，只是改变你的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-18 15:00:51 Blazemonger

谢谢你，但请参阅演示链接。我想通过jQuery进行滚动。 –

已更新的答案。 – Blazemonger

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

与ID为HREF页面只是跳到到目标框。使用像scrollTo这样的插件使其滚动平滑。

来源

2013-01-18 15:01:24 griffla

谢谢，但请参阅演示链接。我想通过jQuery进行滚动。 –

这就是为什么我分享scrollTo链接:)但首先标记必须是正确的。 – griffla

在底部查看我的版本。 –

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

$('#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-18 15:02:28

上点击左立动画

回答

相关问题