Javascript 冲突的;“返回顶部”;脚本-如何修复?
我正在使用互联网上的两个脚本,一个用于平滑滚动到页面底部的DIV,另一个用于平滑滚动“返回顶部”。问题是两者之间存在冲突,因此“返回顶部”模式不起作用(单击时没有返回顶部)。单独使用时,它们都能完美地工作 如何将它们“合并”为一个脚本?(并保持“返回顶部”脚本的淡入淡出效果)请参见 非常感谢Javascript 冲突的;“返回顶部”;脚本-如何修复?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用互联网上的两个脚本,一个用于平滑滚动到页面底部的DIV,另一个用于平滑滚动“返回顶部”。问题是两者之间存在冲突,因此“返回顶部”模式不起作用(单击时没有返回顶部)。单独使用时,它们都能完美地工作 如何将它们“合并”为一个脚本?(并保持“返回顶部”脚本的淡入淡出效果)请参见 非常感谢 $(document).ready(function() { $('a[href^="#"]').on('click', function (e) { e.preventDefaul
$(document).ready(function() {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
$(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
$('a[href^=“#”]”)。on(…
正在选择这两个
元素。一种方法是重写此选择器以仅匹配应强制滚动到底部的
元素(可能为此使用CSS类?)
另一种快速而肮脏的修复方法是在附加自己的单击处理程序之前重置“back to top”元素上的事件处理程序:
jQuery('.back to top').off()。单击(…
我通常只使用一个平滑滚动功能,然后使用href=“\idOfHighestElementOnPage”设置我的“go to top”按钮。这是平滑滚动功能(如果您不想走我走的路线,可能会包含一些有用的内容):
谢谢,但在这种情况下,我失去了淡入淡出效果的返回顶部按钮不幸
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 100
}, 'normal');
return false;
}
}
});
})
window.onscroll = scrollFunction;
function scrollFunction() {
var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if (top > 200) {
$('.back-to-top').fadeIn();
}
else {
$('.back-to-top').fadeOut();
}
}