CODEWITHSUNDEEP
javascriptjqueryhtmlcssscrolltop
Amir Rezvani
Amir Rezvani

Reputation: 1504

use scrollTop in Aside not the html,body

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>

Upvotes: 0

Views: 260

Answers (2)

DavidDomain
DavidDomain

Reputation: 15293

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>

Upvotes: 1

Rens Tillmann
Rens Tillmann

Reputation: 861

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.

Upvotes: 0

Related Questions