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:

position();

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

READ ALSO
jQuery FancyBox Plugin display gallery dynamically

jQuery FancyBox Plugin display gallery dynamically

I have a view in my CodeIgniter app. I am using fancybox to display user submitted images from a foreach php loop.

380
jQuery. js - Always Scrolling the page

jQuery. js - Always Scrolling the page

I have a script to a blackjack website, but when i enter on the website (http://btcblackjack. org) the website keep scrolling down and never stops.

406
JS to automatically convert text in parentheses with specific markup including match

JS to automatically convert text in parentheses with specific markup including match

Upon page loading, I want to find all text in the body that is encapsulated in parenthess (here's an example) and replace it with the following:.

297
Google map fine me is not working?

Google map fine me is not working?

i have done google map with category filter it's working fine. here i want to introduce fineme(user current location).

314