标签: anchor-scroll

我对网站编码相当基础，但我想将锚点合并到我的水平滚动网站中。我已经尝试过，但没有成功。

下面是我尝试过的代码 - 我不确定这是否与我的导航栏不是标准的<li>而不是我使用单独的 div 有关。我将附上一张我如何设计该网站的图片，以便您能够理解这个概念。

HTML：

<div id="navbar">
    <div class="tab1" href="#home">
        <div class="text1">Home</div>
    </div>
    <div class="tab2" href="#work">
        <div class="text2">Work</div>
    </div>
    <div class="tab3" href="#about">
        <div class="text3">About</div>
    </div>
</div>

<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

    </div>
  </div>
</div>

图片： https: //i.stack.imgur.com/SEdiy.jpg

我希望最终能够实现平滑滚动，但一旦解决了这个问题，我就会考虑这一点。

当单击按钮或链接组件时,vaadin中是否有一种方法可以滚动或跳转到Label视图内的某个点(例如a )(例如a Panel)？类似于网站上的锚点功能？

我正在使用Vaadin 7.5.9

编辑: 我有一个HorizontalSplitPanel.它的第一个组件是用户可以进行选择的项目列表.是否将项目选为HorizontalSplitPanel打开的第二个组件.第二个组成部分VerticalLayout包含一个标题和一个菜单和一个Panel.如果菜单中有选择,Panel则应滚动到引用的条目.

我的页面上有一个链接:

<li class="jump"><a href="http://example.com/#about">About Me</a></li>

我想使用jQuery删除.jump类中任何URL 的' http://example.com/ '部分.你能用最简单的代码指出我正确的方向吗？我希望代码在哈希之前删除任何内容,如果可能的话,不要在jQuery代码中指定URL(例如删除http://example.com/).

谢谢!

我有这个 url http://localhost:8080/?london并且它需要加载到 london in <section id="london">.- 这是页面上的id 。我不能使用http://localhost:8080/#london，即使它会起作用！

为了让事情变得更复杂，我使用了一个 vue 框架，他们想要 master-origin/src/assets/js/mixins/Anchor.js 中的代码 - 因此我无法安装 jquery，必须是 vanilla js。

我试过了

var el = [];
el = window.location.href.split("/?")[1];
console.log("el: " + el);
el.scrollIntoView();

哪个获取 /? 之后的值，但是当我尝试 scrollIntoView 时，我在控制台中收到此消息

类型错误：el.scrollIntoView 不是 VM10022 IE 工作中的函数：4

为什么？我正在关注 w3 学校指南https://www.w3schools.com/jsref/met_element_scrollintoview.asp

我使用以下代码为我的站点上的锚添加平滑滚动。因为我有一个粘性标头ID，想将其偏移200像素

$('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;
        }
    }
});

哈艾。我的小项目遇到了麻烦。我已经创建了<a href="slogannya">some icon</a>，<blockquote id="slogannya">但是当我单击<a>标签时它不起作用。这是我的代码：

网页

<section class="to-content">
        <a class="scrollTo" href="#slogannya">
          <button type="button">
            <i class="material-icons">keyboard_arrow_down</i>
          </button>
        </a>
      </section>
      <section class="slogan">
        <blockquote id="slogannya">
          <p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
        </blockquote>
      </section>

jQuery

$(document).ready(function () {
  $(".scrollTo").on('click', function (e) {
      e.preventDefault();
      var target = $(this).attr('href');
      $('html, body').animate({
          scrollTop: ($(target).offset().top)
      }, 2000);
  });

});

我怎样才能完成这项工作？请帮我 ：）

编辑

我知道我的问题是什么。在我的项目中，我有一个名为“general.css”的CSS（此CSS内容CSS重置和任何页面的其他样式）。在这个CSS中，它使任何元素成为box-sizing: border-box;和其他元素一样的样式。我不知道具体是什么问题。但是当我删除“general.css”时，平滑滚动就可以了。谢谢各位朋友的回答:)，我很感激！