我对跟随ode有问题。
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
我的目的是单击导航链接之一（请参见屏幕截图）。
然后，它应该滚动到垂直的红线（主DIV类“ #incontent”）。
但是，这里的“主页”链接滚动到站点末尾。 （请参见左侧的屏幕截图）
http://i.stack.imgur.com/7yXkv.jpg
С你帮我吗？我找不到任何解决方案。我的JS技能很低
编辑：我的代码现在：
嗨，谢谢您的快速回复！
我尝试了您的解决方案，但仍然无法正常工作。
我在里面放了
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>我可以在这里写下实际上的完整代码吗？此外，我正在与Joomla合作。
Php索引文件：
<div id="content">
<div id="incontent" class="test">
<div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml">
</div>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(window).width(),
containerWidth = $('.test').width(),
leftOff = (winWidth - containerWidth)/2;
$('ul.nav a').on('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left - leftOff
}, 1000);
event.preventDefault();
});
});
</script>
的CSS
#incontent{
font-family: 'Raleway', sans-serif;
padding-top: 170px;
width: 6000px;
font-size: 12px;
font-weight: lighter;
line-height: 17px;
}
.items-row{
margin-left: 0px !important;
width:840px;
float: left;
background-color: #E5E5E5;
padding: 20px;
margin: 10px;
margin-top:;
border: 1px dashed #cfcfcf;
outline: 2px solid #E5E5E5;
min-height: 320px;
}
JOOMLA WYSIWYG：
<table border="0">
<tbody>
<tr>
<td class="kat">
<div id="buttons">
<ul class="nav">
<li><a href="#home">Home</a></li>
|
<li><a href="#ueberuns">Über uns</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<p><img src="images/fotolia_38533929.jpg" border="0" width="300" height="215" style="float: right; margin-left: 10px; margin-right: 10px;" /></p>
<div id="home" class="ultimativ"> </div>
<h2>Herzlich Willkommen!</h2>
<p>Haben Sie schon länger keine Familienfotos mehr gemacht oder wollen Sie gerne schöne Fotos von Sich an dem schönsten Ort ihrer Stadt machen? Durch jahrelanger Erfahrung ist eine Vielzahl an Fotoshootings durch unsere Kameralinsen gewandert und hat vielen Freude bereitet, egal ob Studiofotos, Fotos für Ihre Hochzeitseinladungskarten oder ein außergewöhnliches Bewerbungsfoto. Klicken Sie sich durch unsere verschiedenen Bereiche und machen Sie sich ein Bild davon, wie auch ihre Bilder aussehen könnten.</p>
</td>
</tr>
</tbody>
</table>
我认为我的问题是CSS“宽度6000像素”
因为我需要Joomla放置博客文章在里面的水平空间。
不知道我还能怎么解决这个问题。
我仍然在这里有一个错误。
xxx
在索引页面上有两个Divs
在打印页面上，有三个div xxx
我将宽度设置为6000px，可以添加更多自动显示内联的Blog Post。
但是这里有个问题，如果我到处都有6000像素，则可以滚动到右侧的很多地方，这样我的Blogpost就消失了。
我希望你明白。
我仍然需要这个问题的帮助！
最佳答案
不确定您的HTLM / CSS，但至少应该了解逻辑。
$(function() {
var winWidth = $(window).width(),
containerWidth = $('.container').width(),
leftOff = (winWidth - containerWidth)/2;
$('ul.nav a').on('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left - leftOff
}, 1000);
event.preventDefault();
});
});
我正在获取窗口宽度和容器宽度，并将它们相减（以从容器的左侧和右侧获取空间），然后将它们除以2，以仅获得1个空间。
因此，既然现在我们知道左侧空间的宽度是多少，我们从div
$($anchor.attr('href')).offset().left - leftOff和d的offset（）。left中减去它就可以得到：Demo
关于javascript - scrollLeft:到主格的结尾而不是offset()。left，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18498652/