import
throttle
from
'throttle-debounce/throttle'
;
const
cubic
=
value
=>
Math
.
pow
(
value
,
3
)
;
const
easeInOutCubic
=
value
=>
value
<
0.5
?
cubic
(
value
*
2
)
/
2
:
1
-
cubic
(
(
1
-
value
)
*
2
)
/
2
;
export
default
{
name
:
'GoTopAndBottom'
,
props
:
{
goTopVisibilityHeight
:
{
type
:
Number
,
default
:
200
tobotVisibilityHeight
:
{
type
:
Number
,
default
:
200
target
:
[
String
]
,
right
:
{
type
:
Number
,
default
:
40
bottom
:
{
type
:
Number
,
default
:
40
data
(
)
{
return
{
el
:
null
,
container
:
null
,
toTopVisible
:
false
,
toBottomVisible
:
true
,
computed
:
{
styletopBottom
(
)
{
return
`
${
this
.
bottom
+
20
}
px
`
;
styleRight
(
)
{
return
`
${
this
.
right
}
px
`
;
stylebotBottom
(
)
{
return
`
${
this
.
bottom
-
20
}
px
`
;
mounted
(
)
{
this
.
init
(
)
;
this
.
throttledScrollHandler
=
throttle
(
300
,
this
.
onScroll
)
;
this
.
container
.
addEventListener
(
'scroll'
,
this
.
throttledScrollHandler
)
;
this
.
onScroll
(
)
;
methods
:
{
init
(
)
{
this
.
container
=
document
;
this
.
el
=
document
.
documentElement
;
if
(
this
.
target
)
{
this
.
el
=
document
.
querySelector
(
this
.
target
)
;
if
(
!
this
.
el
)
{
throw
new
Error
(
`
target is not existed:
${
this
.
target
}
`
)
;
this
.
container
=
this
.
el
;
onScroll
(
)
{
const
scrollTop
=
this
.
el
.
scrollTop
;
this
.
toTopVisible
=
scrollTop
>=
this
.
goTopVisibilityHeight
;
this
.
toBottomVisible
=
(
scrollTop
+
document
.
documentElement
.
clientHeight
)
<=
(
this
.
el
.
scrollHeight
-
this
.
tobotVisibilityHeight
)
;
handleTopClick
(
e
)
{
this
.
scrollToTop
(
)
;
this
.
$emit
(
'toTopClick'
,
e
)
;
handleBottomClick
(
e
)
{
this
.
scrollToTBottom
(
)
;
this
.
$emit
(
'toBotClick'
,
e
)
;
scrollToTop
(
)
{
const
el
=
this
.
el
;
const
beginTime
=
Date
.
now
(
)
;
const
beginValue
=
el
.
scrollTop
;
const
rAF
=
window
.
requestAnimationFrame
||
(
func
=>
setTimeout
(
func
,
16
)
)
;
const
frameFunc
=
(
)
=>
{
const
progress
=
(
Date
.
now
(
)
-
beginTime
)
/
500
;
if
(
progress
<
1
)
{
el
.
scrollTop
=
beginValue
*
(
1
-
easeInOutCubic
(
progress
)
)
;
console
.
log
(
beginValue
)
;
rAF
(
frameFunc
)
;
}
else
{
el
.
scrollTop
=
0
;
rAF
(
frameFunc
)
;
scrollToTBottom
(
)
{
const
el
=
this
.
el
;
const
beginTime
=
Date
.
now
(
)
;
const
beginValue
=
el
.
scrollTop
;
const
endScrollTop
=
el
.
scrollHeight
-
document
.
documentElement
.
clientHeight
;
const
rAF
=
window
.
requestAnimationFrame
||
(
func
=>
setTimeout
(
func
,
16
)
)
;
const
frameFunc
=
(
)
=>
{
const
progress
=
(
Date
.
now
(
)
-
beginTime
)
/
500
;
if
(
progress
<
1
)
{
el
.
scrollTop
=
(
endScrollTop
-
beginValue
)
*
easeInOutCubic
(
progress
)
+
beginValue
;
rAF
(
frameFunc
)
;
}
else
{
el
.
scrollTop
=
endScrollTop
;
rAF
(
frameFunc
)
;
beforeDestroy
(
)
{
this
.
container
.
removeEventListener
(
'scroll'
,
this
.
throttledScrollHandler
)
;
</
script
>
这部分有可能会出现编译错误
根据网上的解决方案添加如下的文件和代码，但是好像没什么用…
-
使用该组件
效果:
使用说明
部分说明请看官方文档
element-ui el-backtop
组件改造后使用具名插槽，
top按钮使用 solt=“top”,bottom按钮使用 solt=“bottom”
子组件事件
@toTopClick 点击回到顶部按钮触发
@toBotClick 点击拉到底部按钮触发
按钮间距
若需要更多功能可继续扩展
element
-
ui
中的backtop返回顶部组件的使用
最近写的项目中用到了
vue
和
element
-
ui
实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。
找了不少文章，有些是直接copy了官方的文档，有的是给出了 解决方案，但是没有说明，有点看不懂到底要怎么弄。
最后的最后，我差点就自己写原生。 最终因为懒就没有自己写。
所以我仔细观察...
<template>
Scroll down to see the bottom-right button.
<
el
-backtop target=".page-component__scroll .
el
-scrollbar__wrap"></
el
-backtop>
</template>
target：指向需要
<template>
<
el
-tooltip placement="top" content="回到顶部">
<back-to-top :custom-style="myBackToTopStyle"
:visibility-height="300" :back-position="0" transition-name="fade"/>
</
el
-tooltip>
</template>
我在用
element
-
ui
导航栏出现如下问题原因是我用div包裹住了导航栏，而div有个margin-top:90px就会这样。删掉就行。
<div style="margin-top:90px;height:500px">
<
el
-menu>导航栏</
el
-menu>
还有第二种情况，在导航栏上面也会加div，div有margin-top:90px也会这带导致导航栏异常。
<div style="margin-top:90px;he
setTimeout(() => {
this.showScrollTop =
document.body.scrollTop + document.document
Element
.scrollTop + document.body.clientHeight >
document.body.clientHeight
// this
<
el
-popover placement="bottom" width="400" trigger="click">
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;height:100px;">
<li v-for="(item,index) in list" class="infinite-list-item" :key="index">{{.
<div class="pages-content-scroll">
<
el
-backtop target=".pages-content-scroll"
:visibility-height="visibleHeight"
<template>
<div class="box">
<
el
-backtop target=".box" :visibility-height="100" :bottom="60" :right="20"></
el
-backtop>
页面........
</template>
有时候会发现这个根本无效，那么父级盒子最好设
