[英]Issue with javascript when scrolling via menu buttons
我已經建立了一個簡單的1頁網站,當您單擊每個菜單項時,頁面會平滑滾動到該特定部分。 那部分我工作得很好...
加載該部分后,將顯示圖像,並且文本在圖像上緩慢向上滾動,這在第一部分(最高部分)上絕對可以正常工作。
我遇到的問題是,當您單擊第二,第三和第四菜單鏈接時,一旦頁面移至頁面的該部分,由於上面的部分也加載了滾動條,因此內容會繼續向上滾動。
這是我用來加載文本以向上滾動的javascript:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.content-scroll').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 800;
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'margin-top':'0'},10000);
}
});
});
});
CSS:
.content-scroll { margin-top: 1000px; }
誰能推薦最好的方法,這樣,當我單擊第二,第三和第四部分鏈接時,它將跳到該部分,並且上面的內容立即加載,而無需向上滾動內容?
感謝任何反饋。 謝謝
編輯:預先為每個鏈接( .about-section
, services-section
等)輸入上面的代碼,但是意識到我只需要輸入一次即可。
不過,加載該部分后,其中的內容仍會向上滾動。
任何反饋表示贊賞:)
編輯2:我整理了一個測試網站,顯示了滾動問題http://test.flixonstudios.co.uk-在這里您可以看到我所說的清楚的細節。
我有一陣子我做了一段時間
https://codepen.io/simondavies/pen/WRXOZw
$('#navigation').on('click', function(evt){ evt.preventDefault(); var gotoSection = evt.target.dataset.scrollto; var scrollPos = document.querySelector('#'+ gotoSection).offsetTop; $('html,body').animate({scrollTop: scrollPos },1000,'linear'); }); $('p').on('click','a.back',function(evt){ evt.preventDefault(); $('html,body').animate({scrollTop: 0 },1000,'linear'); })
.sections { margin: 0 auto; padding:30px; height: 100Vh; background: #d9d9d9; display: table; verticle-align: middle; } .two { background: #e9e9e9; } p { margin: 0 auto; text-align: center; font-family: helvetica; font-size: 20px; line-height: 30px; font-wieght: normal; display: table-cell; vertical-align: middle; height: 100%; } nav { margin: 0 auto; padding-top: 10px; text-align: center; width: 100%; height: 40px; position: fixed; z-index: 10; top: 0; background: #555; } a { margin: 0 auto; text-align: center; font-family: helvetica; font-size: 20px; line-height: 30px; font-wieght: normal; display: inline-block; height: 30px; width: 200px; text-decoration: none; color: #fff; transition: color 500ms; } a:hover { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="navigation"> <a href="#" data-scrollto="section-one">Section One</a> | <a href="#" data-scrollto="section-two">Section Two</a> | <a href="#" data-scrollto="section-three">Section three</a> </nav> <div class="sections" id="section-one"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div> <div class="sections two" id="section-two"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div> <div class="sections" id="section-three"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.