从导航底部而非页面顶部滚动至Div

演示

$(this).preventDefault是错误的，您使用e.preventDefault();，其中e是事件，它在函数声明中设置为第一个参数。

你没有提供任何HTML，所以用这个作为的例子

<nav id="nav">
    <ul>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
    </ul>
<nav>
<!-- content -->
<a id="scroll" href="#">^ TOP</a>

#nav的底部将是$('#nav').height() + $('#nav').offset().top

$("#scroll").click(function(e){ // <-- variable for event is set here
  e.preventDefault();
  $('html,body').animate({
    scrollTop: $('#nav').height() + $('#nav').offset().top
  }, 1000);
});

.向下滚动元素应该在底部。换句话说，scrollTop: $(".scroll-down").offset().top将把文档滚动到该元素。并确保您只有一个.scroll-down元素。

检查小提琴。点击div".advertising"将滚动到文档底部。

HTML

<div class="wrapper">
        <div class="advertising" id="scroll">Advertising</div>
    <div class="header">Header</div>

    <div class="slideshow">Slideshow</div>
    <div class="advertising">Advertising</div>
</div>
<div class="wrapper">
    <div id="content">
        <h1>Content Area</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.
Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.
In varius sodales odio sed dapibus. Ut ut orci quis ante hendrerit dignissim. Quisque at enim eget turpis adipiscing molestie. Sed sed nulla ante, sed pellentesque urna. Fusce fermentum, erat in consectetur elementum, ante nibh scelerisque dui, eget dictum urna felis nec dui. Quisque felis libero, placerat in mattis non, scelerisque nec nulla. Suspendisse potenti. In mauris lectus, pretium adipiscing dictum ut, ultrices nec enim. Fusce mauris nibh, auctor eget euismod egestas, vehicula quis augue. Sed eget tellus pharetra ligula adipiscing suscipit quis eu elit.
Duis tristique, mauris lacinia posuere sollicitudin, tellus nulla lacinia nulla, eget vulputate quam leo in nisi. Phasellus cursus, purus non accumsan ultricies, sem nibh accumsan elit, eget malesuada nulla purus sit amet quam. Fusce tempus justo vel turpis euismod aliquet. Integer pulvinar lacus vel diam consequat ut porttitor ante tempus. Curabitur sit amet nibh at libero accumsan volutpat. Nullam laoreet, metus non posuere faucibus, massa sapien lobortis justo, quis tempus purus orci semper nunc. Sed id sapien turpis. Vestibulum rutrum lacus sed augue mattis vel dignissim mi consectetur. Cras eget eros neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis commodo sem, ac vehicula nisi fermentum a. Curabitur scelerisque auctor pellentesque. Proin non arcu ante, a ornare tortor. Maecenas faucibus porta orci, posuere facilisis odio consequat quis. Pellentesque placerat laoreet justo, sed eleifend sem consequat eget. Vestibulum euismod rhoncus semper. Cras congue dapibus massa at vehicula. In eros libero, adipiscing quis vestibulum id, commodo et dui. Curabitur semper aliquam adipiscing. Suspendisse et urna nulla. Sed iaculis vehicula adipiscing. Sed scelerisque, libero nec aliquam varius, quam mi posuere augue, ut tempor metus eros quis risus.     
    </div>
    <div id="left-tab-col">
        <a class="tab-button" style="top:10000px">Tab</a>   
    </div>
    <div id="right-tab-col">
        <a class="tab-button" style="top:10000px">Tab</a>           
    </div>
</div>
<div class="wrapper">

    <div class="footer">Footer</div>
    <div class="nav">Footer Nav</div>
</div>

JS-

$("#scroll").click(function(){
  $('html,body').animate({
    scrollTop: $(".nav").offset().top
  }, 1000)
});

http://jsfiddle.net/SGCHt/487/

首先，我想指出，您阻止的点击操作或链接到的按钮操作没有正确键入，因此将运行该操作。

此外，由于我们遗漏了一些html，您的代码有点不完整，但您的问题已经足够清楚，可以给出解释。

这取决于你想在页面上转到哪里以及如何到达那里，但最常见的方法是使用achor和相应的id。您可以使用该项目转到特定的分区。

例如，如果我点击像这样的项目

 <div class="navbar-collapse collapse" id="nav" style="height: 1px;">
     <ul class="nav navbar-nav">
         <li><a href="#profile">Profile</a></li>`

它将跳转到同一页面上id为profile的html对象，但是，为了获得滚动效果，您可以添加这样的内容。

$("#nav ul li a[href^='#']").on('click', function(e) {
   e.preventDefault();
   var hash = this.hash;
   $('html, body').animate({
       scrollTop: $(this.hash).offset().top
     }, 300, function(){
       window.location.hash = hash;
     });   
});

正如您在这里看到的，对象(函数declassation中的e(被阻止，而不是this。

我的观点是，这将使它成为滚动动画。有几个动画你也可以玩。

如果你不想使用e.preventDefault();，也可以用return false;来交换。

$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1500, 'swing');
    return false;
});   

(这是一个让它滚动回顶部的代码btw(

有关滚动条函数的更多信息，请参阅Jquery文档：https://api.jquery.com/scrollTop/

祝好运

好吧，这对我来说终于奏效了。谢谢！

$("#scroll").click(function(e){
 e.preventDefault();
 var nav = $(".nav-bar").height() + $(".nav-bar").offset().top;
  $('html,body').animate({
    scrollTop: $(".scroll-down").offset().top - nav
  }, 1000)
});