Question

是否可以为提交按钮创建到页面div的平滑滚动行为？

我有类似的话

<input type="submit" value="FREE QUOTE!" onclick="window.location.href = '#quote';">

进入div就很好了，但是它跳了起来。

对于页面上的其他锚点链接，我使用的是平滑滚动的jQuery脚本，可为它们创建平滑的滚动：

$(document).on('click', 'a[href^="#"]', function (e) {
    e.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1000, 'linear');
});

正如预期的那样，对于普通锚来说，这是很好的，但是按钮会跳动。

我当然可以设置普通锚的样式以具有此按钮的外观，但这会完全破坏设计。如果我使用CSS scroll-behavior: smooth;，则可以对该按钮进行平滑滚动，但是除最近的浏览器外，对此按钮似乎没有很好的支持。

有没有一种方法可以使“提交”按钮平滑滚动到页面div？我不介意按钮的滚动是否是单独的脚本/进程，而不是香草锚，但只是想使按钮平滑滚动。

Answer 1

您可以创建另一个事件监听器，该事件监听器的目标类似于自定义数据属性，例如：<input type="submit" value="FREE QUOTE!" data-scroll="#quote" />：

function scrollTo($ele) {
    $('html, body').stop().animate({
        scrollTop: $ele.offset().top
    }, 1000, 'linear');
}

$(document).on('click', 'a[href^="#"]', function (e) {
    e.preventDefault();
    const $ele = $($(this).attr('href'));
    scrollTo($ele);
});

$(document).on('click', '[data-scroll]', function (e) {
    e.preventDefault();
    const $ele = $($(this).data('scroll'));
    scrollTo($ele);
});

以下是您的JS的快速更新：


    Color color = new Color(0, 0, 0);
    Color reflected_color = new Color(0, 0, 0);
    Sphere obj = (Sphere) this.find_nearest_obj(ray, scene).get(0);
    Vector l = null;
    double obj_dist = (double) this.find_nearest_obj(ray, scene).get(1);

    if (obj == null)
      return color;

    for (Object o : scene.getObjects()) {
      if (o instanceof Vector) {
        l = (Vector) o;
      }
    }

    /*
     * Calculate specific fragment elements
     */

    Vector hit_pos = ray.getPoint().add(ray.getDir().mult(obj_dist));
    Vector normal = hit_pos.sub(obj.getCenter());
    Ray reflected_ray = get_reflected_ray(normal, ray, hit_pos, l);
    // Vector view = normal.mult(2).mult(-1 * normal.dot(ray.getDir()));
    Vector view = scene.getCamera().sub(hit_pos);

    if (obj.isReflective() && ctrl < 5) {
      ctrl++;
      reflected_color = ray_trace(reflected_ray, scene);
      // TODO: recursive reflection implementation
    }

    color = colorAt(obj, scene, normal, reflected_color, view, reflected_ray); // return fragment color

    return color;
  }

  public List<Object> find_nearest_obj(Ray ray, Scene scene) {
    double obj_dist = 0;
    Sphere obj_hit = null;
    List<Object> pair = new ArrayList<Object>();
    for (Object s : scene.getObjects()) { // Find scene objects
      if (s instanceof Sphere) {
        double dist = ((Sphere) s).intersects(ray);
        if (dist > 0 && (obj_hit == null || dist < obj_dist)) {
          obj_dist = dist;
          obj_hit = (Sphere) s;
        }
      }
    }
    pair.add(obj_hit);
    pair.add(obj_dist);
    return pair;
  }

  public Ray get_reflected_ray(Vector normal, Ray ray, Vector hit_pos, Vector l) {
    return new Ray(new Point(hit_pos.x, hit_pos.y, hit_pos.z),
        ray.getDir().add(normal.mult(2).mult(-1 * normal.dot(ray.getDir()))));
//    return new Ray(new Point(hit_pos.x, hit_pos.y, hit_pos.z), l.sub(normal.mult(2).mult(normal.dot(l))));
  }

  public Color colorAt(Sphere obj, Scene scene, Vector normal, Color reflected_color, Vector view, Ray reflected) {
    Vector l = null;
    Vector frag_color = null;
    for (Object o : scene.getObjects()) {
      if (o instanceof Vector) {
        l = (Vector) o;
        if (l != null) {
          double diffuse = l.norm().dot(normal.norm());
          double specular = Math.pow(view.dot(reflected.getDir()), specular_coef);
          if (diffuse < 0)
            diffuse = 0;
          if (specular < 0)
            specular = 0;
            frag_color = (obj.getColor().add(reflected_color)).mult(ambient_control * ambient_coef + (1 - ambient_coef) * diffuse + specular);
        }
      }
    }
    return new Color(frag_color.x, frag_color.y, frag_color.z);
  }
}

将提交按钮平滑滚动到页面div

1 个答案: