For a section of my website, I am utilizing jquery scroll functionality. Below is the code I am using within $(document).ready():
var div = $('#wrap'),
wrapScreenHeight = div.height(),
wrapHeight = div.outerHeight(),
listHeight = div.find('ul').outerHeight();
div.on('mousemove', function(e) {
var cPointY = e.pageY,
dP = ((cPointY / wrapHeight));
div.scrollTop((listHeight * dP) - wrapScreenHeight);
});
Here is my HTML and CSS:
<div id="wrap">
<ul>
<li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
<li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
...
<li><h3><a href="#">سینما نباشد دنیا نیست</a>just comedown but it doesn't go up</h3></li>
</ul>
</div>
The code functions correctly on jsfiddle. However, when implemented on my website, the scrolling only goes down and does not move back up as the mouse moves. Here is my website link.==>I have added a 1px red border around the scroll section on my website!! And here is the jsfiddle link for reference.