diff --git a/packages/vant/src/back-top/BackTop.tsx b/packages/vant/src/back-top/BackTop.tsx index 5cedd0acd..8a777c7a0 100644 --- a/packages/vant/src/back-top/BackTop.tsx +++ b/packages/vant/src/back-top/BackTop.tsx @@ -35,6 +35,7 @@ export const backTopProps = { bottom: numericProp, target: [String, Object] as PropType, offset: makeNumericProp(200), + immediate: Boolean, teleport: { type: [String, Object] as PropType, default: 'body', @@ -66,7 +67,7 @@ export default defineComponent({ emit('click', event); scrollParent.value?.scrollTo({ top: 0, - behavior: 'smooth', + behavior: props.immediate ? 'auto' : 'smooth', }); }; diff --git a/packages/vant/src/back-top/README.md b/packages/vant/src/back-top/README.md index 5e7d0c109..b87059554 100644 --- a/packages/vant/src/back-top/README.md +++ b/packages/vant/src/back-top/README.md @@ -23,7 +23,9 @@ app.use(BackTop); Please scroll the demo page to display the back top button. ```html - + + + ``` ```js @@ -104,6 +106,14 @@ export default { }; ``` +### Immediate Scroll + +Add `immediate` prop to scroll to top immediately. + +```html + +``` + ## API ### Props @@ -115,6 +125,7 @@ export default { | bottom | Bottom distance of the page, the default unit is px | _number \| string_ | `40` | | offset | The component will not display until the scroll offset reaches this value | _number_ | `200` | | teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` | +| immediate `v4.0.9` | Whether to scroll to top immediately | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/back-top/README.zh-CN.md b/packages/vant/src/back-top/README.zh-CN.md index c6077fc7e..dd793355e 100644 --- a/packages/vant/src/back-top/README.zh-CN.md +++ b/packages/vant/src/back-top/README.zh-CN.md @@ -23,7 +23,9 @@ app.use(BackTop); 请滚动右侧的示例页面,当页面滚动 `200px` 时,右下角会出现返回顶部按钮。 ```html - + + + ``` ```js @@ -106,6 +108,14 @@ export default { }; ``` +### 瞬间滚动 + +当设置 `immediate` 属性后,页面滚动的过程不再有过渡效果,而是瞬间滚动到顶部。 + +```html + +``` + ## API ### Props @@ -117,6 +127,7 @@ export default { | bottom | 距离页面底部的距离,默认单位为 `px` | _number \| string_ | `40` | | offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` | | teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` | +| immediate `v4.0.9` | 是否瞬间滚动到顶部 | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/back-top/demo/index.vue b/packages/vant/src/back-top/demo/index.vue index 0e1f899a0..3d3b8923a 100644 --- a/packages/vant/src/back-top/demo/index.vue +++ b/packages/vant/src/back-top/demo/index.vue @@ -11,12 +11,14 @@ const t = useTranslate({ backTop: '返回顶部', customContent: '自定义内容', customPosition: '自定义位置', + immediateScroll: '瞬间滚动', setScrollTarget: '设置滚动目标', }, 'en-US': { backTop: 'Back Top', customContent: 'Custom Content', customPosition: 'Custom Position', + immediateScroll: 'Immediate Scroll', setScrollTarget: 'Set Scroll Target', }, }); @@ -51,6 +53,11 @@ const targetEl = ref(); + + + + + diff --git a/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap index 10fb9872e..eea85b603 100644 --- a/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap @@ -51,6 +51,17 @@ exports[`should render demo and match snapshot 1`] = ` Set Scroll Target +
@@ -440,6 +451,14 @@ exports[`should render demo and match snapshot 1`] = ` style="display: none;" >
+ `;