热门 教程笔记 子比主题 子比主题 – 文章主内容详细信息样式
今天给大家分享是一个子比主题文章主内容上方加一个详细信息样式，这款样式我觉得还是不错的，用子比做软件站的人挺多的，所以今天就给大家免费分享一下这个文章主内容详细信息样式，古腾堡可以自定义信息，喜欢的自行部署吧！效果
后台配置
更新日志
[*]# 修复下载按钮自动跳转子比的付费阅读、付费下载等等功能
[*]# 修复没有开启付费阅读、付费下载等不显示文章顶部显示下载
代码部署
这个原来版本的代码我将保留，在下面我将发新的一个版本~
原版代码
一共有两个部分，跟着我的教程走不会有问题，话不多说直接开始！
定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，然后将下面的代码放到里面，其实下面的代码是放到metabox-options.php文件里面的，但是方便就放到func.php里面吧
if (class_exists('CSF')) {
CSF::createMetabox('zib_post_extra', array(
'title' => '文章额外信息',
'post_type'=> array('post'),
'context' => 'advanced',
'data_type'=> 'unserialize',
));
$fields = array();
$fields[] = array(
'id' => 'zib_platform',
'type' => 'select',
'title' => '平台',
'options' => array(
'android' => 'Android',
'ios' => 'iOS',
'windows' => 'Windows',
'mac' => 'Mac',
'linux' => 'Linux',
'other' => '其他',
),
'default' => 'android'
);
$fields[] = array(
'id' => 'zib_size',
'type'=> 'text',
'title' => '文件大小',
'desc'=> '如：21.3M'
);
$fields[] = array(
'id' => 'zib_version',
'type'=> 'text',
'title' => '文件版本',
'desc'=> '如：v3.3.7'
);
$fields[] = array(
'id' => 'zib_language',
'type'=> 'text',
'title' => '语言',
'desc'=> '如：简体中文'
);
$fields[] = array(
'id' => 'zib_license_type',
'type' => 'select',
'title' => '授权类型',
'options' => array(
'free' => '免费版',
'modified'=> '修改版',
'official'=> '官方版',
'other' => '其他',
),
'default' => 'official'
);
$fields[] = array(
'id' => 'zib_recommend_star',
'type' => 'select',
'title' => '推荐星级',
'options' => array(
'1' => '★☆☆☆☆',
'2' => '★★☆☆☆',
'3' => '★★★☆☆',
'4' => '★★★★☆',
'5' => '★★★★★',
),
'default' => '5'
);
CSF::createSection('zib_post_extra', array('fields' => $fields));
}
add_action('admin_head', function() {
echo '<style>
.csf-metabox .csf-field { margin-bottom: 6px !important; }
.csf-metabox .csf-field .csf-title { margin-bottom: 2px !important; }
.csf-metabox .csf-field + .csf-field { border-top: none !important; }
</style>';
});
定位：/wp-content/themes/ZibTF/inc/functions/zib-single.php，那么这个文件就是子比的页面的文件，然后我们找到下面的函数，大约在157行，如下图
把这整个函数全部替换成下面的代码，因为我改了里面的代码，你直接替换就行，记得备份一下，方便后面好更新，如果有子主题的话当我没说！
function zib_get_breadcrumbs() {
static $zib_get_breadcrumbs = null;
if ($zib_get_breadcrumbs !== null) {
return $zib_get_breadcrumbs;
}
if (!is_single() || !_pz('breadcrumbs_single_s', true)) {
$zib_get_breadcrumbs = '';
return $zib_get_breadcrumbs;
}
$categorys = get_the_category();
if ($categorys) {
$category = $categorys;
$lin = '<ul class="breadcrumb">
<li><a href="' . get_bloginfo('url') . '"><i class="fa fa-map-marker"></i> ' . (!_pz('breadcrumbs_home_text', true) ? get_bloginfo('name') : '首页') . '</a></li><li>
' . get_category_parents($category->term_id, true, ' </li><li> ') . (!_pz('breadcrumbs_single_text', true) ? get_the_title() : '正文') . '</li></ul>';
$post = get_post();
$size = 'full';
$img_url = wp_cache_get($post->ID, 'post_thumbnail_url_' . $size, true);
if (false === $img_url) {
$img_url = '';
$post_thumbnail_id = get_post_thumbnail_id($post->ID);
if ($post_thumbnail_id) {
$image_src = zib_get_attachment_image_src($post_thumbnail_id, $size);
$img_url = isset($image_src) ? $image_src : '';
}
if (!$img_url) {
$img_url = zib_get_post_meta($post->ID, 'thumbnail_url', true);
}
if (!$img_url && _pz('thumb_postfirstimg_s', true)) {
$post_img_urls = zib_get_post_img_urls($post);
$img_url = isset($post_img_urls) ? $post_img_urls : '';
if ($img_url && $size && 'full' !== $size) {
$img_id = zib_get_image_id($img_url);
if ($img_id) {
$img = wp_get_attachment_image_src($img_id, $size);
if (isset($img)) {
$img_url = $img;
}
}
}
}
wp_cache_set($post->ID, $img_url, 'post_thumbnail_url_' . $size, 3600);
}
if (!$img_url) {
$img_url = '默认封面图片链接';
}
$cat = get_the_category();
$cat_links = '';
$category_colors = ['blue', 'green', 'yellow', 'red', 'purple'];
foreach ($cat as $index => $category) {
$color = $category_colors[$index % count($category_colors)];
$cat_links .= '<a class="but ml6 radius c-' . $color . '" href="' . get_category_link($category->term_id) . '" title="查看此分类更多文章"><i class="fa fa-folder-open-o"></i>' . $category->name . '</a> ';
}
$tags = get_the_tags();
$tag_links = '';
if ($tags) {
foreach ($tags as $tag) {
$tag_links .= '<a class="but ml6 radius" title="查看此标签更多文章" href="' . get_tag_link($tag->term_id) . '">#' . $tag->name . '</a>';
}
}
$platform = get_post_meta($post->ID, 'zib_platform', true);
$platform_map = [
'android' => 'Android',
'ios' => 'iOS',
'windows' => 'Windows',
'mac' => 'Mac',
'linux' => 'Linux',
'other' => '其他'
];
$platform_text = isset($platform_map[$platform]) ? $platform_map[$platform] : 'Android';
$size_text = get_post_meta($post->ID, 'zib_size', true);
$size_text = $size_text ? $size_text : '未知';
$version_text = get_post_meta($post->ID, 'zib_version', true);
$version_text = $version_text ? $version_text : '未知';
$license_type = get_post_meta($post->ID, 'zib_license_type', true);
$license_type_text = '官方版'; // 默认
switch ($license_type) {
case 'free': $license_type_text = '免费版'; break;
case 'modified': $license_type_text = '修改版'; break;
case 'official': $license_type_text = '官方版'; break;
case 'other': $license_type_text = '其他'; break;
}
$recommend_star = get_post_meta($post->ID, 'zib_recommend_star', true);
$recommend_star = $recommend_star ? str_repeat('★', $recommend_star) . str_repeat('☆', 5 - $recommend_star) : '★★★★★';
$update_date = get_the_date('Y年n月j日');
$extra_html = '
<div class="pc-content">
<div class="hide-on-mobile w820 ovf pad20 bgW tjApp" style="margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
<div class="app-info ovf">
<b class="fl appImg"><img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover"></b>
<div class="fl">
<h1 class="appName">' . get_the_title() . '</h1>
<div class="theme-box article-tags">
' . $cat_links . '
' . $tag_links . '
</div>
</div>
</div>
<div class="detaBox">
<div class="detaMain fl">
<p><span>平台：</span>' . $platform_text . '</p>
<p><span>大小：</span>' . $size_text . '</p>
<p><span>版本：</span>' . $version_text . '</p>
<p><span>授权：</span>' . $license_type_text . '</p>
<p><span>推荐：</span>' . $recommend_star . '</p>
<p><span>更新：</span>' . $update_date . '</p>
</div>
<div>
<button onclick="scrollToTarget()" style="width: 180px; height: 50px; text-align: center; color: #fff; background: #008ded; display: block; font-size: 20px; margin: 0px auto 0 auto; border: none;">立即下载</button>
</div>
</div>
</div>
</div>';
$first_cat_name = $cat ? $cat->name : '未分类';
$extra_html .= '
<div class="mobile-content">
<div class="hide-on-pc w100 ovf pad20 bgW tjApp" style="padding-left: 10px;padding-right: 10px;margin-bottom: 20px;border-radius: 8px;box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
<header id="info" style="min-height: 126px;">
<img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover" style="float:left;margin-right:10px;width:66px;height:66px;border-radius:8px;">
<div class="name"><h1 style="font-size: 16px;">' . get_the_title() . '</h1></div>
<div class="mobile-info-grid">
<div><span>分类：</span>' . $first_cat_name . '</div>
<div><span>大小：</span>' . $size_text . '</div>
<div><span>更新：</span>' . $update_date . '</div>
<div><span>平台：</span>' . $platform_text . '</div>
</div>
<div style="margin-top: 20px;">
<button onclick="scrollToTarget()" style="width: 100%; height: 40px;color: #fff; background: #008ded; display: block; font-size: 18px; border: none;">立即下载</button>
</div>
</header>
</div>
</div>';
$zib_get_breadcrumbs = $lin . $extra_html;
return $zib_get_breadcrumbs;
}
$zib_get_breadcrumbs = '';
return $zib_get_breadcrumbs;
}
CSS代码我就不多说了，直接丢到：子比主题–>>自定义CSS样式即可！
/*文章顶部*/
.mobile-content {
display: none;
}
.pc-content {
display: block;
}
@media (max-width: 768px) { /* 假设768px以下是移动端 */
.mobile-content {
display: block;
}
.pc-content {
display: none;
}
}
.w820 {width: 100%;}
.pad20 {padding: 20px;}
.bgW {background-color: #fff;}
.ovf {overflow: hidden;}
body, input, textarea {font: 14px 'FAE\8F6F\96C5\9ED1';}
.ovf {overflow: hidden;}
.tjApp .app-info .appImg {margin-right: 20px;}
.tjApp .app-info img {width: 85px;height: 85px;display: block;border-radius: 10px;}
.fl {float: left;}
.tjApp .app-info div.fl {width: 490px;}
.tjApp .app-info .appName {color: var(--header-color);font-size: 20px;margin: 10px 0 15px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 490px;}
.tjApp .app-info .label {color: #333;font-size: 14px;}
.tjApp .detaBox {margin-top: 10px;}
.tjApp .detaBox .detaMain {width: 470px;}
.fr {
float: right;
}
.tjApp .detaBox .downloadBtn a {
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
background: #008ded;
display: block;
font-size: 20px;
margin: 0px auto 0 auto;
border-radius: 3px;
}
a:link, a:visited {
text-decoration: none;
}
.tjApp .app-info .article-share {
margin-top: 10px;
}
.article-share {
color: #333;
line-height: 25px;
}
.article-share span {
margin-top: 1px;
}
.tjApp .app-info .article-share div.fl {
width: auto;
}
.tjApp .detaBox .detaMain p {
float: left;
width: 32%;
height: 30px;
line-height: 30px;
color: var(--header-color);
overflow: hidden;
white-space: nowrap;
}
p {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
.meta-right .meta-view{
display: unset !important;
}
}
.mobile-info-grid {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.mobile-info-grid > div {
width: 50%;
box-sizing: border-box;
padding: 2px 0;
font-size: 14px;
color: #333;
line-height: 1.6;
}
@media (min-width: 768px) {
.mobile-info-grid { display: none; }
}
修复版本代码
定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，然后将下面的代码放到里面，其实下面的代码是放到metabox-options.php文件里面的，但是方便就放到func.php里面吧，修复版本这个代码不变
if (class_exists('CSF')) {
CSF::createMetabox('zib_post_extra', array(
'title' => '文章额外信息',
'post_type'=> array('post'),
'context' => 'advanced',
'data_type'=> 'unserialize',
));
$fields = array();
$fields[] = array(
'id' => 'zib_platform',
'type' => 'select',
'title' => '平台',
'options' => array(
'android' => 'Android',
'ios' => 'iOS',
'windows' => 'Windows',
'mac' => 'Mac',
'linux' => 'Linux',
'other' => '其他',
),
'default' => 'android'
);
$fields[] = array(
'id' => 'zib_size',
'type'=> 'text',
'title' => '文件大小',
'desc'=> '如：21.3M'
);
$fields[] = array(
'id' => 'zib_version',
'type'=> 'text',
'title' => '文件版本',
'desc'=> '如：v3.3.7'
);
$fields[] = array(
'id' => 'zib_language',
'type'=> 'text',
'title' => '语言',
'desc'=> '如：简体中文'
);
$fields[] = array(
'id' => 'zib_license_type',
'type' => 'select',
'title' => '授权类型',
'options' => array(
'free' => '免费版',
'modified'=> '修改版',
'official'=> '官方版',
'other' => '其他',
),
'default' => 'official'
);
$fields[] = array(
'id' => 'zib_recommend_star',
'type' => 'select',
'title' => '推荐星级',
'options' => array(
'1' => '★☆☆☆☆',
'2' => '★★☆☆☆',
'3' => '★★★☆☆',
'4' => '★★★★☆',
'5' => '★★★★★',
),
'default' => '5'
);
CSF::createSection('zib_post_extra', array('fields' => $fields));
}
add_action('admin_head', function() {
echo '<style>
.csf-metabox .csf-field { margin-bottom: 6px !important; }
.csf-metabox .csf-field .csf-title { margin-bottom: 2px !important; }
.csf-metabox .csf-field + .csf-field { border-top: none !important; }
</style>';
});
定位：/wp-content/themes/ZibTF/inc/functions/zib-single.php，那么这个文件就是子比的页面的文件，然后我们找到下面的函数，大约在157行，如下图，修复版本这个代码要变，直接替换原版的就可
把这整个函数全部替换成下面的代码，因为我改了里面的代码，你直接替换就行，记得备份一下，方便后面好更新，如果有子主题的话当我没说！
function zib_get_breadcrumbs() {
static $zib_get_breadcrumbs = null;
if ($zib_get_breadcrumbs !== null) {
return $zib_get_breadcrumbs;
}
if (!is_single() || !_pz('breadcrumbs_single_s', true)) {
$zib_get_breadcrumbs = '';
return $zib_get_breadcrumbs;
}
$categorys = get_the_category();
if ($categorys) {
$category = $categorys;
$lin = '<ul class="breadcrumb">
<li><a href="' . get_bloginfo('url') . '"><i class="fa fa-map-marker"></i> ' . (!_pz('breadcrumbs_home_text', true) ? get_bloginfo('name') : '首页') . '</a></li><li>
' . get_category_parents($category->term_id, true, ' </li><li> ') . (!_pz('breadcrumbs_single_text', true) ? get_the_title() : '正文') . '</li></ul>';
$post = get_post();
$size = 'full';
$img_url = wp_cache_get($post->ID, 'post_thumbnail_url_' . $size, true);
if (false === $img_url) {
$img_url = '';
$post_thumbnail_id = get_post_thumbnail_id($post->ID);
if ($post_thumbnail_id) {
$image_src = zib_get_attachment_image_src($post_thumbnail_id, $size);
$img_url = isset($image_src) ? $image_src : '';
}
if (!$img_url) {
$img_url = zib_get_post_meta($post->ID, 'thumbnail_url', true);
}
if (!$img_url && _pz('thumb_postfirstimg_s', true)) {
$post_img_urls = zib_get_post_img_urls($post);
$img_url = isset($post_img_urls) ? $post_img_urls : '';
if ($img_url && $size && 'full' !== $size) {
$img_id = zib_get_image_id($img_url);
if ($img_id) {
$img = wp_get_attachment_image_src($img_id, $size);
if (isset($img)) {
$img_url = $img;
}
}
}
}
wp_cache_set($post->ID, $img_url, 'post_thumbnail_url_' . $size, 3600);
}
if (!$img_url) {
$img_url = '默认封面图片链接';
}
$cat = get_the_category();
$cat_links = '';
$category_colors = ['blue', 'green', 'yellow', 'red', 'purple'];
foreach ($cat as $index => $category) {
$color = $category_colors[$index % count($category_colors)];
$cat_links .= '<a class="but ml6 radius c-' . $color . '" href="' . get_category_link($category->term_id) . '" title="查看此分类更多文章"><i class="fa fa-folder-open-o"></i>' . $category->name . '</a> ';
}
$tags = get_the_tags();
$tag_links = '';
if ($tags) {
foreach ($tags as $tag) {
$tag_links .= '<a class="but ml6 radius" title="查看此标签更多文章" href="' . get_tag_link($tag->term_id) . '">#' . $tag->name . '</a>';
}
}
$platform = get_post_meta($post->ID, 'zib_platform', true);
$platform_map = [
'android' => 'Android',
'ios' => 'iOS',
'windows' => 'Windows',
'mac' => 'Mac',
'linux' => 'Linux',
'other' => '其他'
];
$platform_text = isset($platform_map[$platform]) ? $platform_map[$platform] : 'Android';
$size_text = get_post_meta($post->ID, 'zib_size', true);
$size_text = $size_text ? $size_text : '未知';
$version_text = get_post_meta($post->ID, 'zib_version', true);
$version_text = $version_text ? $version_text : '未知';
$license_type = get_post_meta($post->ID, 'zib_license_type', true);
$license_type_text = '官方版'; // 默认
switch ($license_type) {
case 'free': $license_type_text = '免费版'; break;
case 'modified': $license_type_text = '修改版'; break;
case 'official': $license_type_text = '官方版'; break;
case 'other': $license_type_text = '其他'; break;
}
$recommend_star = get_post_meta($post->ID, 'zib_recommend_star', true);
$recommend_star = $recommend_star ? str_repeat('★', $recommend_star) . str_repeat('☆', 5 - $recommend_star) : '★★★★★';
$update_date = get_the_date('Y年n月j日');
// 判断是否有资源下载
$pay_mate = get_post_meta($post->ID, 'posts_zibpay', true);
$has_download = false;
if (!empty($pay_mate['pay_download']) && is_array($pay_mate['pay_download'])) {
foreach ($pay_mate['pay_download'] as $item) {
if (!empty($item['link'])) {
$has_download = true;
break;
}
}
}
$extra_html = '';
if ($has_download) {
// PC端
$extra_html .= '
<div class="pc-content">
<div class="hide-on-mobile w820 ovf pad20 bgW tjApp" style="margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
<div class="app-info ovf">
<b class="fl appImg"><img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover"></b>
<div class="fl">
<h1 class="appName">' . get_the_title() . '</h1>
<div class="theme-box article-tags">
' . $cat_links . '
' . $tag_links . '
</div>
</div>
</div>
<div class="detaBox">
<div class="detaMain fl">
<p><span>平台：</span>' . $platform_text . '</p>
<p><span>大小：</span>' . $size_text . '</p>
<p><span>版本：</span>' . $version_text . '</p>
<p><span>授权：</span>' . $license_type_text . '</p>
<p><span>推荐：</span>' . $recommend_star . '</p>
<p><span>更新：</span>' . $update_date . '</p>
</div>
<div>
<button onclick="scrollToTarget()" style="width: 180px; height: 50px; text-align: center; color: #fff; background: #008ded; display: block; font-size: 20px; margin: 0px auto 0 auto; border: none;">立即下载</button>
</div>
</div>
</div>
</div>';
// 移动端
$first_cat_name = $cat ? $cat->name : '未分类';
$extra_html .= '
<div class="mobile-content">
<div class="hide-on-pc w100 ovf pad20 bgW tjApp" style="padding-left: 10px;padding-right: 10px;margin-bottom: 20px;border-radius: 8px;box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
<header id="info" style="min-height: 126px;">
<img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover" style="float:left;margin-right:10px;width:66px;height:66px;border-radius:8px;">
<div class="name"><h1 style="font-size: 16px;">' . get_the_title() . '</h1></div>
<div class="mobile-info-grid">
<div><span>分类：</span>' . $first_cat_name . '</div>
<div><span>大小：</span>' . $size_text . '</div>
<div><span>更新：</span>' . $update_date . '</div>
<div><span>平台：</span>' . $platform_text . '</div>
</div>
<div style="margin-top: 20px;">
<button onclick="scrollToTarget()" style="width: 100%; height: 40px;color: #fff; background: #008ded; display: block; font-size: 18px; border: none;">立即下载</button>
</div>
</header>
</div>
</div>';
}
$zib_get_breadcrumbs = $lin . $extra_html;
return $zib_get_breadcrumbs;
}
$zib_get_breadcrumbs = '';
return $zib_get_breadcrumbs;
}
CSS代码我就不多说了，直接丢到：子比主题–>>自定义CSS样式即可，修复版本css代码不动
/*文章顶部*/
.mobile-content {
display: none;
}
.pc-content {
display: block;
}
@media (max-width: 768px) { /* 假设768px以下是移动端 */
.mobile-content {
display: block;
}
.pc-content {
display: none;
}
}
.w820 {width: 100%;}
.pad20 {padding: 20px;}
.bgW {background-color: #fff;}
.ovf {overflow: hidden;}
body, input, textarea {font: 14px 'FAE\8F6F\96C5\9ED1';}
.ovf {overflow: hidden;}
.tjApp .app-info .appImg {margin-right: 20px;}
.tjApp .app-info img {width: 85px;height: 85px;display: block;border-radius: 10px;}
.fl {float: left;}
.tjApp .app-info div.fl {width: 490px;}
.tjApp .app-info .appName {color: var(--header-color);font-size: 20px;margin: 10px 0 15px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 490px;}
.tjApp .app-info .label {color: #333;font-size: 14px;}
.tjApp .detaBox {margin-top: 10px;}
.tjApp .detaBox .detaMain {width: 470px;}
.fr {
float: right;
}
.tjApp .detaBox .downloadBtn a {
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
background: #008ded;
display: block;
font-size: 20px;
margin: 0px auto 0 auto;
border-radius: 3px;
}
a:link, a:visited {
text-decoration: none;
}
.tjApp .app-info .article-share {
margin-top: 10px;
}
.article-share {
color: #333;
line-height: 25px;
}
.article-share span {
margin-top: 1px;
}
.tjApp .app-info .article-share div.fl {
width: auto;
}
.tjApp .detaBox .detaMain p {
float: left;
width: 32%;
height: 30px;
line-height: 30px;
color: var(--header-color);
overflow: hidden;
white-space: nowrap;
}
p {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
.meta-right .meta-view{
display: unset !important;
}
}
.mobile-info-grid {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.mobile-info-grid > div {
width: 50%;
box-sizing: border-box;
padding: 2px 0;
font-size: 14px;
color: #333;
line-height: 1.6;
}
@media (min-width: 768px) {
.mobile-info-grid { display: none; }
}
修复版本要多加一个JS代码，直接丢到：子比主题–>>自定义javascript代码
function scrollToTarget() {
var target = document.querySelector('.box-body.relative');
if (target) {
var rect = target.getBoundingClientRect();
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var offset = 100;
window.scrollTo({
top: rect.top + scrollTop - offset,
behavior: 'smooth'
});
}
}
页:
[1]