V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iEverX
V2EX  ›  程序员

网页锚点,跳到特定位置,比如距离屏幕顶端100px

  •  
  •   iEverX ·
    iEverX · 2013-02-27 23:04:56 +08:00 · 17122 次点击
    这是一个创建于 4285 天前的主题,其中的信息可能已经有所发展或是发生改变。
    是这个意思,如下

    <div id="here">...</div>

    ...
    ...
    ...

    <a href="#here">Go</a>

    现在想做的是,点击链接的时候,跳到了here这个div,但是希望这个div不是处于屏幕的最顶段,而是处于某个特定位置,比如距离屏幕顶端100px或者处于屏幕的中间

    有可能做到吗?
    不用js能做到吗?
    如果用js应该怎么写?

    多谢
    12 条回复    2018-11-07 09:26:54 +08:00
    leofml
        1
    leofml  
       2013-02-27 23:10:04 +08:00
    window.scrollTo(0,100)
    window.scrollTo(0,document.body.scrollHeight/2)
    iEverX
        2
    iEverX  
    OP
       2013-02-28 14:00:47 +08:00
    @leofml
    不是这个意思,我是想让 here这个div处于可以看见的屏幕的中间,而不是把整个网页
    ant_sz
        3
    ant_sz  
       2013-02-28 14:08:48 +08:00 via Android
    把这个锚点放到你想处于屏幕中间位置的地方向上100px的地方…
    NemoAlex
        4
    NemoAlex  
       2013-02-28 14:24:27 +08:00   ❤️ 1
    单纯的 HTML 无法做到
    可以用 JS 通过获取元素高度和页面可见区域高度来算出来
    例如 Mootools 有库可以实现
    http://mootools.net/docs/more/Fx/Fx.Scroll#Fx-Scroll:toElementCenter

    自己做也不复杂,只要框架解决好浏览器兼容问题就行了
    iEverX
        5
    iEverX  
    OP
       2013-02-28 16:18:54 +08:00
    @leofml
    @ant_sz
    @NemoAlex
    3ks.
    我的解决方法是,计算除这个div的绝对位置top,是从 http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 这个链接上看到的
    然后window.scroll(0, top - 100);

    @ant_sz 所说的也是一种解决方案,但是会引入没有多余的节点,个人不是很喜欢
    Part
        6
    Part  
       2013-03-01 09:37:53 +08:00
    @iEverX "here这个div处于可以看见的屏幕的中间",首先要用js是必须的,获得浏览窗口的高度(已经margin:0 auto;就不需要获取宽度了),div的高度,算算就搞定要scroll的值啦,然后scroll搞定!
    adieu
        7
    adieu  
       2013-03-01 10:07:57 +08:00
    可以试试看用这个项目 https://github.com/flesler/jquery.scrollTo

    可以实现scroll到指定div再加上一个offset的效果
    fen
        8
    fen  
       2013-03-01 12:37:17 +08:00
    之前遇到过类似的问题,纯CSS实现:
    a:target{
    padding-top: 100px;
    }
    当然还可以用楼上诸位的 js 方法实现
    http://sfau.lt/bNGtw
    yqyq1020
        9
    yqyq1020  
       2013-03-01 21:01:51 +08:00 via Android
    我觉得用padding-top可以,用不用js看具体情况吧
    ihuguowei
        10
    ihuguowei  
       2013-03-02 12:33:30 +08:00
    @fen 用到CSS3了,哈哈。
    CSGO
        11
    CSGO  
       2018-10-09 16:19:00 +08:00
    @fen 赞!
    carynux
        12
    carynux  
       2018-11-07 09:26:54 +08:00
    @fen Thanks♪(・ω・)ノ
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4270 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 05:33 · PVG 13:33 · LAX 21:33 · JFK 00:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.