[英]Animate scroll jquery not working
So I think I might have an idea of what my problem is -- in an effort to make my site responsive, I've used height:auto
and set height using min-height:some-percentage
. 因此,我想我可能对我的问题有所了解-为了使我的网站具有响应性,我使用了
height:auto
并使用min-height:some-percentage
设置了高度。 I understand this might not be best practice but it works and is a lot less time consuming than media queries. 我知道这可能不是最佳做法,但是它可以工作,并且比媒体查询要少很多时间。
So the following code for animated scroll used to work when I didn't set height using the method stated above: 因此,当我没有使用上述方法设置高度时,以下用于动画滚动的代码可以正常工作:
$('.animate_scroll').click(function(e){
e.preventDefault(); //I tried without this line
var loc_id = $($(this).attr('href')),
loc_pos = loc_id.offset().top;
console.log($(this).attr('href')); //outputs the right div id
console.log(loc_pos); //outputs offset greater than 0
$('html, body').animate({scrollTop : loc_pos}, 300)
})
Anyone know what I'm doing wrong? 有人知道我在做什么错吗? The reason I said I think I have an idea of what my problem is is because the
console.log
statements above log valid values. 我说我想知道我的问题是因为上面的
console.log
语句记录了有效值。
Update : In the code above, I've added a couple more console.log statements to get offset values. 更新 :在上面的代码中,我添加了更多的console.log语句以获取偏移值。 The values are different but even if I set loc_id to
document.getElementById(this.getAttribute('id')).offsetTop
then use that as my scrollTop value, it doesn't scroll. 值是不同的,但是即使我将loc_id设置为
document.getElementById(this.getAttribute('id')).offsetTop
this.getAttribute document.getElementById(this.getAttribute('id')).offsetTop
然后将其用作我的scrollTop值,它也不会滚动。
console.log($(this).attr('href')); //correct id
console.log(loc_pos); //outputs 794.546875
console.log(document.getElementById(this.getAttribute('id')).offsetTop); //944
$(".jumper").on("click", function( e ) { e.preventDefault(); $("body, html").animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 2000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="pliip">pliip</div><a class="jumper" href="#ploop">Ploop</a><a id="#a_id">LINK TO MOVE</a> <div style="height:1000px;background-color:#666">div</div> <!-- Landing elements --> <a class="jumper" href="#pliip">Pliip</a> <div id="ploop">ploop</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.