向下滾動上點擊不能很好地工作

我與菜單，在右鍵菜單上向下滾動與此相似的ID來div的標頭代碼：向下滾動上點擊不能很好地工作

$(".menu").click(function(){  
    var y = $(this).attr('id'); 
    var x = $('#'+y+'e').offset().top; 
    $('.row').animate({scrollTop:x-60},1000); 
});

Example here 但是當我點擊瞭解和後該滾動點擊註冊它什麼都不做，當我點擊註冊後的聯繫人，它向下滾動註冊，當我再次點擊聯繫人時，它回到約。它只有當我點擊約兩次或關於和家後，其他菜單後，它的作品。試試吧，你會看到什麼我談論....

的html代碼：

<div class="row"> 
<div id="homee" class="content" style="background: red;"></div> 
<div id="aboute" class="content" style="background: blue;"></div> 
<div id="registere" class="content" style="background: yellow;"></div> 
<div id="contacte" class="content" style="background: green;"></div> 


</div>

來源

2016-09-10 Sarma

因爲你沒有提供你code是有點硬但解決您的問題，你很可能只是動畫時缺少.stop()。看看我的例子

的jsfiddle鏈接：https://jsfiddle.net/3x6wq73f/2/

的Javascript

$(function() { 
    $('.scroll').on('click', function() { 

    var $target = $('.'+$(this).data('scroll-target')); 
    var $parent = $target.parent(); 

    $('div').stop().animate({ 
     scrollTop: $parent.scrollTop() + $target.position().top - 50//$('.' + target).offset().top 
    }, 'slow'); 
    }); 
});

HTML

<div class="buttons"> 
    <a class="scroll" data-scroll-target="first">First</a> 
    <a class="scroll" data-scroll-target="second">Second</a> 
    <a class="scroll" data-scroll-target="third">Third</a> 
    <a class="scroll" data-scroll-target="fourth">Fourth</a> 
</div> 

<div class="parent-div"> 
    Parent div 
    <div class="huge-content first"> 
    One 
    </div> 
    <div class="huge-content second"> 
    Two 
    </div> 
    <div class="huge-content third"> 
    Three 
    </div> 
    <div class="huge-content fourth"> 
    Four 
    </div> 
</div>

CSS

.buttons { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 50px; 
    background-color: #fff; 
    border: solid 1px #f0f; 
} 

.parent-div { 
    margin-top: 50px; 
    padding: 15px; 
    background-color: #000; 
    color: #fff; 
    max-height: 500px; 
    overflow: auto; 
} 

.huge-content { 
    height: 500px; 
} 

.first { 
    background-color: #f00; 
} 

.second { 
    background-color: #0f0; 
} 

.third { 
    background-color: #00f; 
} 

.fourth { 
    background-color: #f0f; 
}

更新

試試我的jsFiddle吧，看看我的代碼。所有你需要做的就是讓父母的scrollTop加上目標。此外，我不得不添加50，因爲我的資產淨值固定位置高度：50 CSS屬性

來源

2016-09-10 23:23:41 Canvas

反正我不需要HTML的身體我需要滾動裏面div ... – Sarma

編輯你的代碼，把div放入一個讓身體溢出隱藏，並且一個div大小500px和溢出-y自動你將得到和我一樣的問題 – Sarma

很高興聽到它正在工作，我剛剛更新我的jsFiddle在這裏https：// jsfidd le.net/3x6wq73f/3/和針對'ID'工作正常 – Canvas

相反的：

$('.row').animate({scrollTop:x-60},1000);

這樣做：

$('html, body').animate({scrollTop:x-60},1000);

來源

2016-09-10 23:24:01 winhowes

我不滾動身體我有div行，我滾動該div時，我把HTML，身體它不起作用 – Sarma

向下滾動上點擊不能很好地工作

回答

相關問題