我在欢迎页面上使用Smoothscroll.js（不使用GEM - 请参阅下面的代码链接），以便用户可以通过固定的Bootstrap Navbar菜单选项导航到欢迎网页的相应部分。在一个单独的页面上，我正在使用Bootstrap Carousel来允许用户查看和单独的项目组合项目（显示页面）。
这允许用户单击欢迎页面上的Navbar“Portfolio”菜单选项，以平滑滚动到欢迎页面的Portfolio部分。然后，用户可以单击欢迎页面上的特定项目组合项目，这将使他们进入该特定项目组合项目的显示页面，他们可以通过Bootstrap Carousel查看该项目组合项目的多个图像。
问题在于，如果我在我的app / assets / javascripts / jet.js文件中的$(document).ready ()范围内包含Smoothscroll逻辑（见下文），则BootStrap Carousel上的prev / next控件显示页面对用户点击不具有代表性。
如果我编辑jet.js文件并将Smoothscroll逻辑放在$(document).ready ()函数范围之外并保存这些更改，然后加载我的网站。一切都很完美。 Smoothscroll在Welcome页面上按预期工作，prev / next控件在Portfolio show页面上完美运行。我可以在两个页面之间自由导航（欢迎和投资组合显示页面），一切都继续工作。但是，如果我重新加载网页并尝试在欢迎页面上选择导航栏选择以平滑滚动到欢迎页面上的任何部分，我会收到路由错误（例如，没有路由匹配[GET]“/index.html”）。
仅供参考......我的开发环境是：
所以我有两个相关的问题：
1）当Smoothscroll包含在$（document）.ready（）函数的范围内时，任何想法为什么Smoothscroll.js似乎阻止了prev / next控件正常工作？
2）我想知道为什么一切都在我做出改变时工作正常（即将smoothscroll.js逻辑放在$（document）.ready scope之外）然后加载带有这些更改的页面但是当我我第二次重新加载网页时出现路由错误。就像在第一次加载时缓存smoothscroll位置而在第二次加载时缓存（如上所述）？
此处参考是jet.js文件：
$(document).ready(function() {
// Pretty photo script
$("a[data-rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
social_tools: false,
hook: 'data-rel'
});
$(".truncateIt").dotdotdot({
// configuration goes here
/* The text to add as ellipsis. */
ellipsis : '... ',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* Wrap-option fallback to 'letter' for long words */
fallbackToLetter: true,
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : 'a.next',
/* Whether to update the ellipsis: true/'window' */
watch : false,
/* Optionally set a max-height, if null, the height will be measured. */
height : 60,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
// WOW Reveals CSS animation as you scroll down a page.
// Link and activate WOW.js
new WOW().init();
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$('#carousel-generic-example').carousel({
interval:2000,
pause: "false"
});
$('#playButton').click(function () {
$('#carousel-generic-example').carousel('cycle');
});
$('#pauseButton').click(function () {
$('#carousel-generic-example').carousel('pause');
});
}); // /document.ready()
function scroll_to(clicked_link, nav_height) {
var element_class = clicked_link.attr('href').replace('#', '.');
var scroll_to = 0;
if(element_class != '.top-content') {
element_class += '-container';
scroll_to = $(element_class).offset().top - nav_height;
}
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 1000);
}
}
// Scroll location for buttons on banner page
$('a.scroll-link').on('click', function(e) {
e.preventDefault();
scroll_to($(this), $('nav').outerHeight());
});
// Smooth Scrolling for anchor links: http://www.billerickson.net/code/smooth-scrolling-anchor-links/
$('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
}, 1000);
return false;
}
}
});
// }); // /document.ready()
$(".cnbox").each(function () {
var nheight = $(this).find(".nbox").height();
$(this).find(".cbox").css("height", nheight + 50);
});
var caroufredsel = function () {
$('#caroufredsel-portfolio-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#portfolio-prev',
next: '#portfolio-next',
auto: {
play: false
}
});
$('#caroufredsel-blog-posts-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#blog-posts-prev',
next: '#blog-posts-next',
auto: {
play: false
}
});
};
// Isotope Portfolio
var $container = $('.portfolio-container');
var $blogcontainer = $('.posts-wrap');
var $filter = $('.portfolio-filter');
$(window).load(function () {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// jQuery('.carousel').carousel();
// jQuery('#carousel-generic-example').carousel();
caroufredsel();
// Initialize Isotope
$container.isotope({
itemSelector: '.portfolio-item-wrapper'
});
$blogcontainer.isotope({
itemSelector: '.article-wrap'
});
$('.portfolio-filter a').click(function () {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$filter.find('a').click(function () {
$filter.find('a').parent().removeClass('active');
$(this).parent().addClass('active');
});
$(window).smartresize(function () {
$container.isotope('reLayout');
$blogcontainer.isotope('reLayout');
});
$(window).resize(function () {
caroufredsel();
});
});
仅供参考，这是我的app / assets / javascripts / application.js文件：
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
答案 0 :(得分：1)
我遇到了同样的问题，但是我在plugins文件夹中找到了JS文件（jss-script.js和jss-script.min.js），因此我将HTML选择器更改为按ID仅一个div，每个<a>内含href="#"。更改两个文件中的值。
/****************************************************
* *
* JUMP TO ANCHOR LINK SCRIPT START *
* *
****************************************************/
/*SSB-CONTAINER WAS MY SIDE PANEL MENU*/
$('#ssb-container a[href*="#"]').click(function()
{
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname)
{
var target = $(this.hash),
headerHeight = $(".primary-header").height() + 5; // Get fixed header height
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length)
{
$('html,body').animate({ scrollTop: target.offset().top }, scrollSpeed, scrollStyle );
return false;
}
}
});
它实际上开始工作了！
答案 1 :(得分：0)
我换了齿轮并使用了以下解决方案。 Smoothscroll solution。它工作得很好，比我试图做的容易得多。
我仍然对原始解决方案中的冲突感到困惑。这让我觉得我不明白这一切的一些方面。
如果您有想法或理论，请随时添加您的意见或建议的解决方案。