У меня есть два javascripts на моем сайте с одной страницей. Один предназначен для гладкой прокрутки, а другой работает как "назад к вершине". Когда я тестирую свой сайт, работает только один из этих скриптов (тот, который вызывается первым).
Можно ли объединить оба скрипта в один? или как сделать оба сценария без конфликтов?
Я не знаю много о jQuery или javascript, поэтому я не очень хорошо знаком с подходом.noconflict.
Заранее благодарю вас за помощь.
Вот мой код:
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<script>
var $root = $('html, body');
$('a').click(function(){
$root.animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
return false;
});
</script>
Я пришел с решением для дальнейших исследований.
Я объединил оба сценария в полностью функциональный:
<script>
$(document).ready(function(){
$('a.anchor').click(function(){
var anchorAttr = $(this).attr('data-title');
var anchorPos = $('#' + anchorAttr).offset().top;
$('html,body').stop().animate({scrollTop: anchorPos});
});
var backtoTop = $('.control a.backtotop');
backtoTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
backtoTop.fadeIn();
} else {
backtoTop.fadeOut();
}
});
backtoTop.click(function (e) {
e.preventDefault();
$('body,html').stop().animate({
scrollTop: 0
}, 900);
});
});
Вот ссылка на решение, которое я искал: http://jsfiddle.net/RmyxK/5/
Ссылка выше делает именно то, что мне нужно. Я думаю, было бы неплохо поделиться им.