use scrollTop in Aside not the html,body

290

November 23, 2016, at 9:31 PM

i try to use scrollTop , when user Click on the ( li ) element i get the (data-id) from (li) and scroll to the box in aside that have the same id;

problem is when i click the for example (li) number 2 every things fine but when i click it again aside scroll back to top and if you click rapidly it get worst

var aside = $('.aside'); 
 
$("li").on('click',function (){ 
 
	id = $(this).data("id") 
 
	$('.aside').animate({ 
            scrollTop: $('div.item[data-id="' + id + '"]').offset().top 
        }, 300, 'linear') 
 
});

	 
	html,body { 
		width: 100%; 
		height: 100%; 
		float: right; 
		margin:0; 
		padding: 0; 
	} 
 
.aside { 
	height: 100%; 
	width: 400px; 
	position: fixed; 
	top: 0; 
	right:0; 
	background: #ccc; 
	overflow-y: scroll; 
} 
 
.estateWrap { 
	width: 100%; 
	height: 100%; 
	float: right; 
	margin: 0; 
	padding: 0; 
} 
 
.item { 
	float: right; 
	margin: 0px; 
	padding:0px; 
	width: 100%; 
	height: 150px; 
	background: #f5f5f5; 
	margin-bottom: 100px 
}

<html> 
<head> 
	<meta charset="UTF-8"> 
	<title> index </title> 
	<script src="jQuery.min.js"></script> 
</head> 
<body> 
 
	<ul> 
		<li data-id="1">1</li> 
		<li data-id="2">2</li> 
		<li data-id="3">3</li> 
		<li data-id="4">4</li> 
	</ul> 
 
 
<div class="aside"> 
	<div class="estateWrap"> 
		<div class="item" data-id="1">1</div> 
		<div class="item" data-id="2">2</div> 
		<div class="item" data-id="3">3</div> 
		<div class="item" data-id="4">4</div> 
	</div> 
</div> 
 
</body> 
</html>

Answer 1

You need to consider that the offset top position of your item elements change after they have been scrolled. The top value becomes 0. That is why after you click on the same link again it will go all the way up to 0.

You could add the current top position of the parent aside element like so:

var aside = $('.aside'); 
 
function scrollAside (topPos) { 
    aside.animate({ 
        scrollTop: topPos 
    }, 300, 'linear') 
} 
 
$("li").on('click',function () { 
    var id = $(this).data("id"), 
        crntScrollPos = aside.scrollTop(), 
        top = $('div.item[data-id="' + id + '"]').offset().top; 
    if (top + crntScrollPos !== crntScrollPos) { 
        scrollAside(top + crntScrollPos); 
    } 
});

html,body { 
    width: 100%; 
    height: 100%; 
    float: right; 
    margin:0; 
    padding: 0; 
} 
 
.aside { 
    height: 100%; 
    width: 400px; 
    position: fixed; 
    top: 0; 
    right:0; 
    background: #ccc; 
    overflow-y: scroll; 
} 
 
.estateWrap { 
    width: 100%; 
    height: 100%; 
    float: right; 
    margin: 0; 
    padding: 0; 
} 
 
.item { 
    float: right; 
    margin: 0px; 
    padding:0px; 
    width: 100%; 
    height: 150px; 
    background: #f5f5f5; 
    margin-bottom: 100px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<ul> 
    <li data-id="1">1</li> 
    <li data-id="2">2</li> 
    <li data-id="3">3</li> 
    <li data-id="4">4</li> 
</ul> 
 
 
<div class="aside"> 
    <div class="estateWrap"> 
        <div class="item" data-id="1">1</div> 
        <div class="item" data-id="2">2</div> 
        <div class="item" data-id="3">3</div> 
        <div class="item" data-id="4">4</div> 
    </div> 
</div>

Answer 2

Use position instead of offset: