滚动到锚点的开头

马克思主义

我在滚动到锚点时遇到麻烦。我有3个问题:

  1. 当我在两个面板上时,我单击指向其中一个面板的链接。什么都没发生。A或B都不起作用

  2. 例如,当我在D上并单击C时,它将转到C的末尾。

    在单击C之前:

    在此处输入图片说明

    单击C后:

    转到C的末尾

  3. 当我添加任何jQuery或JavaScript这样滚动到哈希

    function scrollTo(hash) { location.hash = "#" + hash; }

    它似乎不起作用。


我想要的是:

无论用户在何处,我都希望该链接转到div的开头(div的最左侧)。


我的密码

我有一个这样的页面:

HTML:

<ul class="links">
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
</ul>
<div class="panels">
    <div class="panel" id="a">I'am A</div>
    <div class="panel" id="b">I'am B</div>
    <div class="panel" id="c"><span class="stupid-long-content">I'am C (very long)</span></div>
    <div class="panel" id="d">I'am D</div>
</div>

每个div是通过css达到的屏幕大小,如下所示:

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

html, body
{
   height:100%;  
}
body
{
    margin:0;
    padding:0;  
}

.panels
{
    white-space: nowrap;
    height: inherit;
}

.panel
{
   height: inherit;
   font-size: 20px;
   text-align: center;
   padding: 60px;
   display: inline-block;
   min-width: 100%;
}

.stupid-long-content
{
    width: 3000px;
    display: block;
}

JSFIDDLE

斯特凡诺·达皮亚兹(Stefano Dalpiaz)

您可以使用jQuery scrollLeft函数并阻止默认的浏览器处理:

$('.links a').click(function(e) {
    e.preventDefault();
    if (this.hash)
        $('body, html').scrollLeft($(this.hash).offset().left);
});

这是更新的小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

滚动到锚点的开头

来自分类Dev

滚动到多个锚点

来自分类Dev

QTextedit设置锚点并滚动到它

来自分类Dev

使用js滚动到锚点

来自分类Dev

使用Vue Router滚动到锚点

来自分类Dev

平滑滚动到锚点的问题

来自分类Dev

提交后自动滚动到锚点

来自分类Dev

滚动到固定标题的锚点位置

来自分类Dev

使用Transition / CSS3滚动到锚点

来自分类Dev

更改“滚动到锚点”偏移量-jQuery

来自分类Dev

滚动到锚点时是否可以运行jQuery代码?

来自分类Dev

jQuery滚动到锚点页面上的位置

来自分类Dev

滚动到锚点后关闭导航栏

来自分类Dev

使用ajax加载页面并滚动到加载的页面锚点

来自分类Dev

使用 jQuery 隐藏 Div 和滚动到锚点

来自分类Dev

如果用户5秒钟内没有滚动,如何平滑滚动到锚点?

来自分类Dev

jQuery-将元素滚动到屏幕中间,而不是通过锚点链接到顶部

来自分类Dev

当页面滚动到达锚点时更改DIV的不透明度

来自分类Dev

加载结果后滚动到并突出显示带有“ .agree”类的锚点

来自分类Dev

如何将iframe中的div从另一个iframe滚动到锚点

来自分类Dev

在以下位置之间自动滚动到最接近的锚点

来自分类Dev

滚动页面到锚点

来自分类Dev

通过单击元素内的锚点或包含div ID的任何地方,将元素滚动到页面顶部

来自分类Dev

Javascript锚点以均匀速度滚动

来自分类Dev

jQuery滚动和锚点初始位置

来自分类Dev

锚点跳而不是平滑滚动

来自分类Dev

jQuery平滑滚动锚点导航

来自分类Dev

jQuery滚动锚点无法正常工作

来自分类Dev

使用锚点,类和jQuery滚动