Прокрутите до Div из нижней части навигационной страницы вверху страницы

Question

Хорошо, поэтому у меня есть кнопка прокрутки (#scroll) в заголовке, которая при нажатии прокручивает следующий div (.scroll-up) вверху страницы. Тем не менее, я хотел бы, чтобы этот div прокручивался до нижней части элемента nav, а не вверху страницы. Как я могу это сделать?

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

Answer 1

Demo

$(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); 
}); 

Answer 2

.scroll вниз элемент должен быть на дне. Другими словами, scrollTop: $(".scroll-down").offset().top прокрутит документ к этому элементу. И убедитесь, что у вас есть только элемент .scroll-down.

Проверьте скрипку. нажмите на div.. реклама будет прокручиваться в нижней части документа.

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/

Answer 3

Во-первых, я хотел бы отметить, ваше предотвращение действий нажмите действия или кнопки вы связали его, не набрано правильно, таким образом, это запустит это действие.

Кроме того, ваш код немного неполный, из-за того, что мы пропустили какой-то html, но ваш вопрос еще более ясен, чтобы дать интерпретацию.

Это зависит от того, где вы хотите перейти на страницу и как туда добраться, но наиболее распространенный способ сделать это - использовать ахор и соответствующий ему идентификатор. Вы можете использовать этот элемент, чтобы перейти к определенному div.

Так, например, если я нажимаю на элемент, как этот

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

Он будет прыгать на объект HTML с идентификатором profile на той же странице, однако, для прокрутки эффекта, вы можете добавить что-то вроде это.

$("#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; 
    }); 
}); 

Как вы видите здесь, объект (e в функции decleration) предотвращается, а не this.

Я хочу сказать, что это оживит его как прокручивающую анимацию. Есть несколько анимаций, с которыми вы можете играть.

e.preventDefault(); также может быть заменен на return false;, если вы не хотите его использовать. Тогда было бы так.

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

(то есть код, что делает его прокрутки назад к вершине BTW)

Более подробная информация о функции scrolltop вы можете найти в документации JQuery: https://api.jquery.com/scrollTop/

Удачи

Answer 4

Хорошо, это закончило работать для меня. Благодаря!

$("#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) 
});