在菜单上单击->动画和动态滚动到元素 [英] On menu clicked --> animate & scroll to the element dynamically
问题描述
我有一个导航菜单:前奏,大小,播放,食物.当用户单击菜单项的超级链接时,我想导航到该元素并设置动画.
例如,如果用户单击 Size 菜单项,那么我想给&用id="Size"
向下滚动到该项目.
注意:此处 size 菜单项href没有任何值,因为它是动态的.
index.html
<nav>
<ul>
<li><a href="#">Intro</a></li>
<li><a href="#">Size</a></li>
<li><a href="#">Play</a></li>
<li><a href="#">Food</a></li>
</ul>
<div class="clear"></div>
</nav>
<aside id="Size" class="sidebar">
<h3>Size</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.
</p>
</aside>
通过将元素的偏移位置传递到scrollTop
,可以使用$.animate(...)
进行平滑滚动.
$.animate:: http://api.jquery.com/animate /
HTML代码:
<nav>
<ul>
<li><a href="#">Intro</a>
</li>
<li><a href="#">Size</a>
</li>
<li><a href="#">Play</a>
</li>
<li><a href="#">Food</a>
</li>
</ul>
<div class="clear"></div>
</nav>
<aside id="Intro" class="sidebar">
<h3>Intro</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Size" class="sidebar">
<h3>Size</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Play" class="sidebar">
<h3>Play</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Food" class="sidebar">
<h3>Food</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
JQUERY代码:
$('li a').on('click', function (e) {
var targetSec = $(this).text();
$('html, body').animate({
scrollTop: $('#' + targetSec).offset().top
}, 2000);
});
实时演示:
http://jsfiddle.net/dreamweiver/3Xm48/11/ >
快乐编码:)
I have a navigation menu: Intro, Size, Play, Food. When a user click on the hyper link of the menu item, I want to navigate to that element and animate.
For example, if a user click on the Size menu item, then I want to animate & scroll down to the item with id="Size"
.
Note: Here size menu item href does not have any value, because it is a dynamic.
index.html
<nav>
<ul>
<li><a href="#">Intro</a></li>
<li><a href="#">Size</a></li>
<li><a href="#">Play</a></li>
<li><a href="#">Food</a></li>
</ul>
<div class="clear"></div>
</nav>
<aside id="Size" class="sidebar">
<h3>Size</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.
</p>
</aside>
You can perform smooth scrolling using $.animate(...)
by passing the offset position of the element to scrollTop
.
$.animate:http://api.jquery.com/animate/
HTML CODE:
<nav>
<ul>
<li><a href="#">Intro</a>
</li>
<li><a href="#">Size</a>
</li>
<li><a href="#">Play</a>
</li>
<li><a href="#">Food</a>
</li>
</ul>
<div class="clear"></div>
</nav>
<aside id="Intro" class="sidebar">
<h3>Intro</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Size" class="sidebar">
<h3>Size</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Play" class="sidebar">
<h3>Play</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
<aside id="Food" class="sidebar">
<h3>Food</h3>
<img src="Images/boxer2.jpg" />
<p>Hegyét bár érti szeret.</p>
</aside>
JQUERY CODE:
$('li a').on('click', function (e) {
var targetSec = $(this).text();
$('html, body').animate({
scrollTop: $('#' + targetSec).offset().top
}, 2000);
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/3Xm48/11/
Happy Coding:)
这篇关于在菜单上单击->动画和动态滚动到元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!