javascript vue组件：滚动到顶部平滑。 （基于MuseUI）

Posted 2021-05-03

export default {
	name: 'backtop',
	data () {
		return {
			show: false
		}
	},
	methods: {
		handleScroll (e) {
			const scrollTop = window.scrollY;
			const height = window.innerHeight;
			this.show = scrollTop > height;
		}
	},
	render (h) {
		return h('mu-scale-transition', [
			h('mu-button', {
				directives: [{
					name: 'scroll',
					value: {
						target: this.$el,
						callback: this.handleScroll
					}
				}, {
					name: 'show',
					value: this.show
				}],
				style: {
					position: 'fixed',
					right: '16px',
					bottom: '16px',
					'z-index': 101
				},
				props: {
					fab: true,
					color: 'blue500'
				},
				on: {
					click: () => window.scrollTo({
						'behavior': 'smooth',
						'left': 0,
						'top': 0
					})
				}
			}, [
				h('icon', {
					props: {
						name: 'angle-up'
					}
				})
			])
		]);
	}
};