欢迎来到Altaba的博客 2017年11月2日
近期在优化一个交互体验，当早顶端点击按钮多下列表某项数据（列表很长，出现滚动条）进行操作，操作完页面自动滚动到刚刚操作项位置，运用jQuery完美实现
下面是demo源码，欢迎有需要的人参考使用
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<style>
.box{
height: 100px;
width: 300px;
border-radius: 10px;
margin: 0 auto 50px;
line-height: 100px;
text-align: center;
font-size: 30px;
.box1:nth-child(1){
background-color: red;
.box2{
background-color: orange;
.box3{
background-color: yellow;
.box4{
background-color: green;
.box5{
background-color: blue;
.box6{
background-color: indigo;
.box7{
background-color: purple;
.box8{
background-color: cyan;
.box9{
background-color: magenta;
.box10{
background-color: pink;
</style>
</head>
<button class="btn btn-primary" name=".box1">点我定位到位置1</button>
<button class="btn btn-primary" name=".box2">点我定位到位置2</button>
<button class="btn btn-primary" name=".box3">点我定位到位置3</button>
<button class="btn btn-primary" name=".box4">点我定位到位置4</button>
<button class="btn btn-primary" name=".box5">点我定位到位置5</button>
<button class="btn btn-primary" name=".box6">点我定位到位置6</button>
<button class="btn btn-primary" name=".box7">点我定位到位置7</button>
<button class="btn btn-primary" name=".box8">点我定位到位置8</button>
<button class="btn btn-primary" name=".box9">点我定位到位置9</button>
<button class="btn btn-primary" name=".box10">点我定位到位置10</button>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('button').click(function () {
var gg = $(this).attr('name');
var scroll_offset = $(gg).offset(); //得到box这个div层的offset，包含两个值，top和left
$("body,html").animate({
scrollTop:scroll_offset.top //让body的scrollTop等于pos的top，就实现了滚动
</script>
</body>
</html>
欢迎来到Altaba的博客 2017年11月2日近期在优化一个交互体验，当早顶端点击按钮多下列表某项数据（列表很长，出现滚动条）进行操作，操作完页面自动滚动到刚刚操作项位置，运用jQuery完美实现下面是demo源码，欢迎有需要的人参考使用 Title .box{ height: 100px;
显然，包括
jQuery
和这个
脚本
；
在要添加视差效果的元素上，只需添加一个新属性： data-image="path-to-image.jpg" ;
使用$('[data-image]').parallax()初始化插件；
您还有几个选择：
defaultStyling - 使用或不使用默认样式（如果没有，您需要手动添加它们）；
speed - 背景与
滚动
事件相关的移动speed 。 更高的值意味着更快的
滚动
（ 1意味着不会有任何影响）
如果您需要强制调整大小（例如，您将一些元素注入到
DOM
中以更改视差元素的初始
位置
），您可以使用$( window ).trigger('re-parallax');
使用足够大的图像（以最常见的分辨率查看您的谷歌分析，以避免大图像！）；
即使您需要真正的大图像，也可
使用requestAnimationFrame和CSS3 3D过渡在垂直
页面
上
滚动
平滑视差动画。
浏览器支持
Chrome 30以上版本，Firefox 34以上版本，Safari 7.1以上版本，IE 10以上版本
将
脚本
jquery
.parallax-scroll.
js
插入到之后的
页面
中（如果需要，还可以插入 ），不需要任何其他
JavaScript
代码。 使用将属性'data-parallax'添加到所需的
dom
元素，该包含要设置动画的optionnals参数和属性。
from-scroll ：动画开始的垂直
滚动
位置
（默认值：当元素可见时）
distance ：动画将持续垂直
滚动
位置
的距离（默认值：窗口可见高度）
to-scroll ：动画结束的垂直
滚动
位置
（默认值： from-scroll + distance ）
//$(this)：
指定
元素对象
//$(this).offset().top：
指定
元素的头部
位置
高度（若滑动
位置
高度不确定，可用该方式加减数字，偏移滑动
位置
）
//瞬间完成滑动
$("html,body").scrollTop($(this).offset().top);
//耗时1秒时间，滑动到
指定
元素（动效）
$('html,body').animate({
scrollTop : $(this).offset().top
}, 1000);
//1秒以后再滑动到
指定
元素（若
页面
元素尚未渲染，
参考文章：
http://www.jb51.net/article/90185.htm
本文实例讲述了
jQuery
实现将div中
滚动
条
滚动
到
指定
位置
的方法。分享给大家供大家参考，具体如下：一、
Js
代码：onload = function () {
//初始化
scrollToLocation();
function scrollToLocation() {
var mainCo
js
实现
指定
dom
元素
滚动
到可视窗口
const roll
Dom
= document.getElementById('
dom
Id') // 获取想要
滚动
的
dom
元素
roll
Dom
.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法
滚动
到可视窗口中间
block的值：start、center、end、nearest
如果对你有帮助，记得点赞噢（~~）
import React, { Component } from "react";
import { Title } from "@/component";
import $ from "
jquery
";
import styles from "./st
可以使用
jQuery
的 .click() 事件和 .append() 方法来实现复制网页锚点到
指定
位置
。
第一步是在点击按钮时触发事件，可以使用
jQuery
的 .click() 方法来实现。
第二步是在事件处理程序中获取锚点元素，并使用
jQuery
的 .append() 方法将其复制到
指定
位置
。
$("#copy-button").click(function(){
var anchor = $("#anchor-element");
$("#destination-element").append(anchor);
这样就可以在点击“copy-button”按钮时将锚点元素复制到“destination-element”
位置
。
