Question

我正在尝试编写jQuery代码，这会使页面滚动到div而不是立即去那里，并使其尽可能简单。我已将所需div的id添加到li元素中。

我的HTML代码如下所示：

<li id="#slide1" class="active" onclick="javascript:location.href='#slide1'"><a href="#slide1" title="Next Section" >About</a></li>
    <li id="#slide2" onclick="javascript:location.href='#slide3'"><a href="#slide2" title="Next Section">Works</a></li>
    <li id="#slide3" onclick="javascript:location.href='#slide3'"><a href="#slide3" title="Next Section">Contact</a></li>
    <li id="#slide4" onclick="javascript:location.href='#slide4'"><a href="#slide4" title="Next Section">belekas</a></li>
    <li id="#slide5" onclick="javascript:location.href='#slide5'"><a href="#slide3" title="Next Section">dar vienas</a></li>

我试过这个jQuery代码，但它不起作用。那么也许有人可以帮助我？

$('li').click(function(){
    var target = $(this).attr('id'); 
    $("html, body").animate({
     scrollTop: target.offset().top
        }, 1000);
    return false;  
 });

更新： https://jsfiddle.net/j452hL2w/这里是导航的小提琴版

Answer 1

我从每个列表项中删除了每个onclick="javascript:location.href='#slide'"。这不是必需的，因为您在javascript中创建了clickhandlers。

我用这个替换了你的点击功能：

$('li').click(function(e) {
  // Prevent default action (e.g. jumping to top of page)
  e.preventDefault();
  // Create a variable with the link found in the list-item
  var link = $(this).children('a');      
  // Animate the document
  $('html,body').animate({
    // Gets the href from the link ('slideX') and scrolls to it on the page.
    scrollTop: $(link.attr('href')).offset().top
    // 'slow'(600ms) can be replaced by 'fast'(200ms) or a number in ms.
    // The default is 400ms
  }, 'slow');
});

这是updated fiddle。

平滑滚动点击li元素

1 个答案: