jQuery“滚动到底部”仅在第二次点击时触发

Question

我正在使用Jquery脚本滚动到底部按钮，问题是它仅在第二次单击时有效。 我看到了其他一些话题，但是他们的解决方案都无效。

我主要尝试：

• 在我的代码周围添加$(document).ready(function()
• 将href void设置为0
• 在click()末尾添加return false

我要使用的是上一个/上一个按钮

  $(function ( $ ) { $.fn.totopscroller = function(options) { var defaults = { showToBottom: true, showToPrev: true, link: false, linkTarget: '_self', toTopHtml: '<a href="#"></a>', toBottomHtml: '<a href="#"></a>', toPrevHtml: '<a href="#"></a>', linkHtml: '<a href="#"></a>', toTopClass: 'totopscroller-top', toBottomClass: 'totopscroller-bottom', toPrevClass: 'totopscroller-prev', linkClass: 'totopscroller-lnk', }; var settings = $.extend({}, defaults, options); var lastposition = 0; var wrapper = this, b_top = null, b_bottom = null, b_prev = null, b_link = null, b_wrapper = null; var init = function() { b_wrapper = $('<div></div>'); if (settings.showToBottom) { b_bottom = $(settings.toBottomHtml); b_bottom.hide(); b_bottom.addClass(settings.toBottomClass); b_bottom.appendTo(b_wrapper); } if (settings.showToPrev) { b_prev = $(settings.toPrevHtml); b_prev.hide(); b_prev.addClass(settings.toPrevClass); b_prev.appendTo(b_wrapper); } b_top = $(settings.toTopHtml); b_top.hide(); b_top.addClass(settings.toTopClass); b_top.appendTo(wrapper); if (settings.link) { b_link = $(settings.linkHtml); b_link.attr("target", settings.linkTarget); b_link.attr("href", settings.link); b_link.addClass(settings.linkClass); b_link.appendTo(wrapper); } b_wrapper.appendTo(wrapper); b_top.click(function(e) { e.preventDefault(); lastposition = $(document).scrollTop(); $('html, body').animate({scrollTop:0}, { duration: 'slow', complete: function () { refresh(); } }); }); if (settings.showToBottom) { b_bottom.click(function(e) { e.preventDefault(); lastposition = 0 $('html, body').animate({scrollTop:$(document).height()}, { duration: 'slow', complete: function () { refresh(); } }); }); } if (settings.showToPrev) { b_prev.click(function(e) { e.preventDefault(); $('html, body').animate({scrollTop:lastposition}, { duration: 'slow', complete: function () { lastposition = $(document).height() - $(window).height() refresh(); } }); }); } } var refresh = function () { if ($(document).scrollTop() > 0) { if (!b_top.is(":visible")) b_top.fadeIn("slow"); } else if (b_top.is(":visible")) b_top.fadeOut("slow"); if ($(window).scrollTop() + $(window).height() == $(document).height() || lastposition > 0) { if (b_bottom.is(":visible")) b_bottom.fadeOut("slow"); } else if (!b_bottom.is(":visible")) b_bottom.fadeIn("slow"); if ($(document).scrollTop() < 20) { if (!b_prev.is(":visible")) b_prev.fadeIn("slow"); } else if (b_prev.is(":visible")) b_prev.fadeOut("slow"); } $(window).scroll(function() { if ($('html, body').is(":animated")) return; refresh(); }); init(); refresh(); return this; }; }( jQuery )); 

 #totopscroller { position: fixed; right: 30px; bottom: 30px; width: 43px; } #totopscroller div { width: 49px; height: 43px; position: relative; } #totopscroller a { display: none; background: url('totopicons.png'); width: 49px; height: 43px; display: block; text-decoration: none; border: medium none; margin: 0 0 -1px; } .totopscroller-top { background-position: 0 0 !important; } .totopscroller-lnk { background-position: 0 -43px !important; } .totopscroller-prev { background-position: 0 -129px !important; position: absolute; top: 0; left: 0; } .totopscroller-bottom { background-position: 0 -86px !important; position: absolute; top: 0; left: 0; } 

 <a href="#" style="display: none;" class="totopscroller-top"></a><div><a href="#" style="display: none;" class="totopscroller-bottom"></a><a href="#" style="display: block;" class="totopscroller-prev"></a></div> 

感谢您的任何建议

Answer 1

将lastposition = 0更改为lastposition = $(document).height是解决方案。

问题是将其设置为0，然后在单击后设置为正确的值，导致第一个clic使我位于页面顶部（无滚动），第二个有效。