Question

我正在制作单页文字新闻主题。每当创建一个新页面时，我都有一个动态填充的菜单，对于每个菜单项，一个部分被添加到我的页面。单击菜单项时，页面向下滚动到该部分。

每个部分都有一个类“section”和页面名称的唯一ID。同样，每个菜单项都有一个类“menu_item”和页面名称的ID。

我正在努力编写正确的jQuery以使页面滚动到该部分（目前它只是跳转）。

jQuery的：

var $paneTarget = $("body");
var $section_name = $('.section').attr('data-slug');
var $menu_link = $('.menu_item').attr('data-slug');

$('$menu_link').click(function(){
    $paneTarget.scrollTo('$section_name', 800);
    return false;
});

我的菜单输出的html：

<ul class="menu">
    <li><a class="menu_item about" data-slug="about" href="#about">About</a></li>
    <li><a class="menu_item portfolio" data-slug="portfolio" href="#portfolio">Portfolio</a></li>
    <li><a class="menu_item services" data-slug="services" href="#services">Services</a></li>
    <li><a class="menu_item test-page" data-slug="test-page" href="#test-page">Test Page</a></li>
    <li><a class="menu_item home" data-slug="home" href="#home">Home</a></li>        
</ul>

最后，为我的部分输出了html

<section class="section" id="about" data-slug="about"  ><h1></section>
<section class="section" id="portfolio" data-slug="portfolio"  ><h1></section>
<section class="section" id="services" data-slug="services"  ><h1></section>
<section class="section" id="test-page" data-slug="test-page"  ><h1></section>
<section class="section" id="home" data-slug="home"  ><h1></section>

我遇到的问题是使用jQuery，当我按下菜单项时，每个部分的页面都会显示scrollTo。请记住，所有菜单项和页面都是动态创建的，因此我需要对其进行编码，以便涵盖添加的新页面。

Answer 1

实际问题是你的jQuery代码永远不会被调用。如您所见alert "here"，请return false，但它永远不会。 preventDefault()被召唤迟到，更好的是使用$('.menu_item').click(function(e){ e.preventDefault(); var id = $(this).attr('data-slug'); $('html,body').animate({ scrollTop: $('#'+id).offset().top }, 1000); });。

尝试这样：

$('.menu_item').click(function(e)...

here

根据您使用的jQuery版本，您可以将$('.menu_item').on('click', function(e)...更改为{{1}}

动态菜单/页面部分的jQuery Scrollto

1 个答案: