时间戳

首页 > 解决方案 > Jquery“滚动到底部”仅在第二次单击时触发

javascript - Jquery“滚动到底部”仅在第二次单击时触发

问题描述

我正在使用 Jquery 脚本来滚动到底部按钮，问题是它只适用于第二次点击。我看到了一些关于它的其他主题，但他们的解决方案都没有奏效。

我主要尝试过：

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

	$(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>

感谢您提供的任何建议

标签： javascriptjquery

解决方案

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

问题是它设置为0，然后点击后设置为正确的值，导致第一个clic让我在页面顶部（没有滚动），第二个有效。

推荐阅读